关于后台管理系统笔记本显示器自适应的思考

最新推荐文章于 2023-12-26 08:51:14 发布

原创最新推荐文章于 2023-12-26 08:51:14 发布 · 387 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#计算机外设

文章讨论了在开发后台管理系统时遇到的跨平台显示问题，提出通过JavaScript检测浏览器窗口大小，如小于特定值（如1200px），自动对页面进行缩放，以提高用户体验。

工作中遇到了再台式电脑开发后台管理系统，但是如果换到笔记本上，有些页面的信息显示就会不全的问题，但是这个问题，一般用户对浏览器进行缩放就可以解决，可是并不是所有用户都会浏览器缩放的调整，所以有没有可能前端监测浏览器的大小，当尺寸小于多少的时候，就对浏览器进行缩放处理

最简单的方式就是网页onload的时候，判断浏览器页面尺寸，然后对网页进行缩放


    window.onload = window.onresize = function () {
      // 获取网页大小
      let windowWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
      // 判断窗口宽度是否小于等于笔记本大小（假设笔记本大小为1200像素）
      if(windowWidth <= 1200){
        // 就让页面缩放成0.7倍
        document.body.style.zoom = 0.7
      }
    }