方案一:直接根据宽度的比率进行缩放。(宽度比率=网页当前宽 / 设计稿宽)
1 <script> 2 window.onload = function () { 3 triggerScale(); 4 window.addEventListener("resize", function () { 5 triggerScale(); 6 }); 7 }; 8 9 function triggerScale() { 10 var targetX = 1920; 11 var targetY = 1080; 12 13 // 获取html的宽度和高度(不包含滚动条) 14 var currentX = 15 document.documentElement.clientWidth || document.body.clientWidth; 16 // https://developer.mozilla.org/en-US/docs/Web/API/Element/clientWidth 17 var currentY = 18 document.documentElement.clientHeight || document.body.clientHeight; 19 20 // 1.缩放比例 3840 / 2160 => 2 21 var ratio = currentX / targetX; 22 23 var bodyEl = document.querySelector("body"); 24 // 2.需要修改缩放的原点 body { transform-origin: left top; } 25 bodyEl.setAttribute("style", `transform:scale(${ratio})`); 26 } 27 </script>
方案二:动态计算网页宽高比,决定是是否按照宽度的比率进行缩放。
<script> window.onload = function () { triggerScale(); window.addEventListener("resize", function () { triggerScale(); }); }; function triggerScale() { var targetX = 1920; var targetY = 1080; var targetRatio = 16 / 9; var currentX = document.documentElement.clientWidth || document.body.clientWidth; var currentY = document.documentElement.clientHeight || document.body.clientHeight; // 1.缩放比例 3840 / 2160 => 2 var ratio = currentX / targetX; var currentRatio = currentX / currentY; var transformStr = ""; if (currentRatio > targetRatio) { ratio = currentY / targetY; transformStr = `transform:scale(${ratio}) translateX(-${ targetX / 2 }px); left:50%;`; } else { transformStr = `transform:scale(${ratio})`; } var bodyEl = document.querySelector("body"); // 2.需要修改缩放的原点 body { transform-origin: left top; } bodyEl.setAttribute("style", transformStr); } </script>