解决div适应屏幕的一个思路

无知的小菜鸡

已于 2022-07-16 14:01:26 修改

阅读量1.8k

点赞数

分类专栏：学习文章标签：前端 javascript

于 2022-07-16 13:56:23 首次发布

本文链接：https://blog.csdn.net/weixin_41897680/article/details/125817335

版权

学习专栏收录该内容

60 篇文章 5 订阅

订阅专栏

前言

之前因为工作需要简单写了一个验证码的小组件 vue加canvas生成验证码，如图
在这里插入图片描述
一开始就是按照屏幕是1920 * 1080进行开发的没有考虑适配，因此出现了不少问题。

1、拖动浏览器时，浏览器不是全屏
在这里插入图片描述
2、电脑的显示不是100%，而是推荐大小，一般默认都是推荐大小，导致电脑根本不是100%

3、电脑根本就不是1920 * 1080的，比如一些老电脑是 1366 * 768 ，记得我大学时买的那个小破电脑就是这样的。

解决

网上方式挺多的、，但是关于大厂的解决方案根本找不到，后来无意中看到一篇文章使用zoom 来解决的

基础知识

window.screen
获取有关用户屏幕的信息，可以得到一下内容
在这里插入图片描述
width、height、就是当前的显示器在当前分辨率下的尺寸，availWidth、availHeight是可使用尺寸（一般是去除工具栏的尺寸）

接着

window.outerHeight;//浏览器外框宽
window.outerWidth;//浏览器外框高
window.innerWidth;//浏览器内框宽（通常是和外框宽一致，开启F12时候，去除开发者工具占的空间）
window.innerHeight;//浏览器内框高（去除标签栏，地址栏，收藏夹栏等等）

解决分辨率和缩放尺寸问题

看一下不同分辨率和缩放尺寸下 window.screen的信息会不会改变
以下在只有一个变量发生改变的情况下进行的。

屏幕按125%显示
在这里插入图片描述
可以看到信息发生了改变，1920/1520等于1.25，刚好对应放大的倍数。1520/1920等于0.8，这是我们需要使用 scale函数来放大的比例

屏幕分辨率是 1600 * 900
在这里插入图片描述

解决浏览器大小改变问题

浏览器125%显示
window.screen 的数值不会发生改变，我们可以通过window.outerWidth 和 window.innerWidth 来获取

window.outerWidth/window.innerWidth=1.25，window.innerWidth/window.outerWidth=0.8

通过 resize 来判断浏览器窗口是否发生改变，浏览器缩放或拖拽时都会执行。

window.addEventListener('resize', () => {
    console.log("改变了")
})

代码

adjustWindow (dom) {
      // 获取屏幕参数
      let screen = window.screen;
      // 屏幕比例
      let screenZoom = screen.width / 1920;
      // 窗口比例
      let windowZoom = window.innerWidth / window.outerWidth;
      // 这里要考虑浏览器是否全屏的
      if(screen.width > window.outerWidth) {
          // 此时浏览器非全屏
          windowZoom = window.outerWidth / screen.width;
      }
      // 保留3位小数
      let zoom = parseFloat((screenZoom * windowZoom).toFixed(3));
      // 改变dom的style
      dom.style.zoom = zoom;


      // 监听窗口的变化
      window.addEventListener('resize', () => {
          // 屏幕比例
          screenZoom = screen.width / 1920;
          // 窗口比例
          windowZoom = window.innerWidth / window.outerWidth;
          // 这里要考虑浏览器是否全屏的
          if(screen.width > window.outerWidth) {
              // 此时浏览器非全屏
              windowZoom = window.outerWidth / screen.width;
          }
          // 保留三位小数
          zoom = parseFloat((screenZoom * windowZoom).toFixed(3));
          // 改变dom的style
          dom.style.zoom = zoom;
      });
  }