网页缩放zoom

_gao88

已于 2024-02-22 16:01:40 修改

阅读量166

点赞数 2

文章标签：前端 web javascript

于 2024-02-02 15:00:49 首次发布

本文链接：https://blog.csdn.net/qq_41342444/article/details/135993982

版权

本文介绍了如何使用JavaScript动态计算设备宽度与设计稿尺寸的比例，通过`scaleRatio`调整`<script>`中的CSS样式，使页面在不同设备上自适应缩放，避免四周留白问题。

摘要由CSDN通过智能技术生成

<script>

      // 设计稿尺寸

      let targetWidth = 1920;



      // 拿到当前设备（浏览器）的宽度

      let currentWidth =

        document.documentElement.clientWidth || document.body.clientWidth;


      // 参照宽度进行缩放（默认情况下）
      let scaleRatio = currentWidth / targetWidth;



      document.documentElement.style = `zoom: ${scaleRatio}`;


        
      // document.body.style = `transform: scale(${scaleRatio})`;
      //用transform: scale页面会缩放，但是页面四周会留白

    </script>