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();
|
||
})();
|