移动端屏幕适配

视口

  • 视觉视口 (visual viewport)

    • 视觉视口默认等于当前浏览器的窗口大小
    • 通过 window.innerWidth 或者 window.visualViewport.width 获取大小
  • 布局视口 (layout viewport)

    • 布局视口是网页布局的基准, 大部分为移动设备布局视口默认值为 980px
    • 布局视口通过 document.documentElement.clientWidth 获取大小
  • 理想视口 (ideal viewport)

    • 理想视口是页面在移动端展示的理想大小
    • 通过 screen.width 获取大小
1
2
3
4
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
/>

适配方案

viewport 适配

1
2
3
4
5
6
(function () {
let visualWidth = 750;
let scaleSize = document.documentElement.clientWidth / visualWidth;
let metaNode = document.querySelector("meta[name=viewport]");
metaNode.content = `initial-scale=${scaleSize},user-scalable=no,minimum-scale=${scaleSize},maximum-scale=${scaleSize}`;
})();

rem 适配

  • HTML 根标签的 font-size 属性值为 1rem 的大小
  • 布局视口的宽设置为 16 份,每份的宽为 1rem
  • 将设计图的位图像素分为 16 份,每份为 1rem 对应的位图像素
  • 设计图对应元素的位图像素宽除以 1rem 的位图像素宽,得到该对应元素 rem 值
1
2
3
4
5
6
@visualWidth = 750;
@rem: @visualWidth/16rem;

XXX {
width: XXX/@rem;
}
1
2
3
(function () {
document.documentElement.style.fontSize = document.documentElement.clientWidth / 16 + 'px';
})();