关于适配的那些事儿

前言

适配一直是页面开发中的一大难题，尤其是在面对不同显示设备时。

值得思考的是，很多前端在开发时没有一套完整的适配解决方案，对于方案的选择也是一知半解。

下面我们从Web端、移动端两种设备，多种方式，如何完成适配？

Web端适配

首先设置用于父级容器的样式： width: 1400px; margin: auto;

1. 固定内容宽度

将 将1. 之后的子级用百分比设置宽度（100%即为1400px），或使用固定宽度px设置宽度（总和<=1400px）

2. 浏览器窗口>=1400px时，子级始终保持不变，多余宽度用于两侧留白。

3. 浏览器窗口度<1400px时，页面出现横向滚动条

此种方案解决了>1400px宽度设备的适配，对于小于1400px的设备呢？

2. 媒体查询 @media screen

利用@media screen重写覆盖样式，实现适配

适合多数场景、样式改动较小、Web端样式能用在移动端上的情况

// 当屏幕小于1400px时，应用以下样式
@media screen and (max-width: 1400px) {
    .navigator {
        padding: 0 50px;
        min-width: 100%;
    }
}

针对不同设备的缩放比率，尤其是很多笔记本默认的125%的缩放比例，如何适配？

3. 缩放适配

如何理解：当用户笔记本默认125%的缩放比例时，实际上我们的页面也被放大了125%

反过来思考：如果除以125%，就能变回正常开发的100%页面比例

1. 此处忽略移动端：本方法适配移动端的效果只是等比例缩小，仅针对于没有适配要求的项目，实现移动端基础的页面适配。
2. 针对mac等高分辨率显示器，使用了默认0.75的比例，如果不进行设置也能正常显示，但效果不佳。
3. 写在App.vue等根路由页面都可行，确保该方法在每次刷新时被执行。

// 判断设备是不是移动端
const isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent);
if (!isMobile) {
  const devicePixelRatio = window.devicePixelRatio || 1;
  function setPageScale() {
    const targetScale = 1 / devicePixelRatio;
    if (targetScale <= 0.5) { // 适配mac高密屏幕
      document.body.style.zoom = 0.75;
      sessionStorage.setItem('scaleZoom', 0.75);
    }else{ // 适配pc标准屏幕
      document.body.style.zoom = targetScale;
      sessionStorage.setItem('scaleZoom', targetScale);
    }
  }
  window.onload = function () {
    setPageScale();
  };
  window.addEventListener('scale', setPageScale);
}

onUnmounted(() => {
  sessionStorage.removeItem('token');
  window.removeEventListener('scale', setPageScale);
});

移动端适配

方案1：媒体查询 @media screen

上一段制定了小于1400px的覆写样式，那么当屏幕宽度小于768px时，认为用户使用的是移动设备。

@media screen and (max-width: 1400px) {
    .navigator {
        padding: 0 50px;
        min-width: 100%;
    }
    @media screen and (max-width: 768px) {
        // 覆写样式
        .navigator {
            padding: 0 20px;
        }
    }
}

同样的针对Web页面适配移动端改动过大的，可以使用方案2

方案2：新写页面，JS判断

let mobileStatus = ref(false);
const getWindowInfo = () => {
    const windowInfo = {
        width: window.innerWidth,
        hight: window.innerHeight
    }
    console.log('实时宽高',windowInfo);
    
    if (windowInfo.width < 768) { // 移动端
        mobileStatus.value = true;
    }else{
        mobileStatus.value = false;
    }
}

写完撒花~