89 lines
2.5 KiB
JavaScript
89 lines
2.5 KiB
JavaScript
|
(function () {
|
|||
|
|
var resume = document.getElementById('resume');
|
|||
|
|
var scaler = document.getElementById('resume-scaler');
|
|||
|
|
var wrapper = document.getElementById('resume-wrapper');
|
|||
|
|
if (!resume || !scaler || !wrapper) return;
|
|||
|
|
|
|||
|
|
function getViewportWidth() {
|
|||
|
|
var candidates = [
|
|||
|
|
wrapper.getBoundingClientRect().width,
|
|||
|
|
document.documentElement.getBoundingClientRect().width,
|
|||
|
|
document.body.getBoundingClientRect().width,
|
|||
|
|
window.innerWidth,
|
|||
|
|
document.documentElement.clientWidth
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
if (window.visualViewport && window.visualViewport.width) {
|
|||
|
|
candidates.push(window.visualViewport.width);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var valid = candidates.filter(function (w) {
|
|||
|
|
return typeof w === 'number' && w > 0;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (!valid.length) return 360;
|
|||
|
|
|
|||
|
|
// 部分国产浏览器（如 vivo）会虚报更大的 layout 宽度，取最小值更接近真实可视区域
|
|||
|
|
return Math.min.apply(null, valid);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fit() {
|
|||
|
|
scaler.style.transform = '';
|
|||
|
|
scaler.style.width = '';
|
|||
|
|
scaler.style.height = '';
|
|||
|
|
scaler.classList.remove('is-scaled');
|
|||
|
|
wrapper.style.width = '100%';
|
|||
|
|
wrapper.style.maxWidth = '100%';
|
|||
|
|
wrapper.style.height = '';
|
|||
|
|
|
|||
|
|
var a4Width = resume.offsetWidth;
|
|||
|
|
var a4Height = resume.offsetHeight;
|
|||
|
|
if (a4Width <= 0 || a4Height <= 0) return;
|
|||
|
|
|
|||
|
|
var vw = getViewportWidth();
|
|||
|
|
var scale = vw / a4Width;
|
|||
|
|
|
|||
|
|
if (scale < 1) {
|
|||
|
|
var scaledWidth = Math.ceil(a4Width * scale);
|
|||
|
|
var scaledHeight = Math.ceil(a4Height * scale);
|
|||
|
|
|
|||
|
|
scaler.classList.add('is-scaled');
|
|||
|
|
scaler.style.width = a4Width + 'px';
|
|||
|
|
scaler.style.height = a4Height + 'px';
|
|||
|
|
scaler.style.transform = 'scale(' + scale + ')';
|
|||
|
|
wrapper.style.width = scaledWidth + 'px';
|
|||
|
|
wrapper.style.maxWidth = '100%';
|
|||
|
|
wrapper.style.height = scaledHeight + 'px';
|
|||
|
|
} else {
|
|||
|
|
wrapper.style.width = '';
|
|||
|
|
wrapper.style.maxWidth = '100vw';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var timer = null;
|
|||
|
|
function scheduleFit() {
|
|||
|
|
if (timer) clearTimeout(timer);
|
|||
|
|
timer = setTimeout(fit, 80);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function fitWhenReady() {
|
|||
|
|
requestAnimationFrame(function () {
|
|||
|
|
requestAnimationFrame(fit);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
window.addEventListener('resize', scheduleFit);
|
|||
|
|
window.addEventListener('orientationchange', fitWhenReady);
|
|||
|
|
window.addEventListener('load', fitWhenReady);
|
|||
|
|
|
|||
|
|
if (window.visualViewport) {
|
|||
|
|
window.visualViewport.addEventListener('resize', scheduleFit);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (document.fonts && document.fonts.ready) {
|
|||
|
|
document.fonts.ready.then(fitWhenReady);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
fitWhenReady();
|
|||
|
|
})();
|