viewport

• PC 端： 浏览器可视区的大小
• 移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏览器上面的可视性

通过在 meta 标签中配置viewport特性，定义适口的各种行为

主要参考资料 viewport 详解 移动端适配总结

view 详解

1. layout viewport
   虚拟的布局入口，大于实际屏幕， 元素的宽度继承于 layout viewport，用于保证网站的外观特性与桌面浏览器一样。layout viewport 到底多宽，每个浏览器不同。Android 和 iPhone 基本上都为 980px，可以通过 document.documentElement.clientWidth 获取

2. visual viewport
   用来承载 layout viewport 的视口，当前显示在屏幕上的页面，即浏览器可视区域的宽度，visual viewport 的尺寸不会是一个固定的值，甚至每款设备都可能不同，所以无法进行任何修改和设置，几种常见设备的 visual viewport 尺寸：

   • iPhone4~iPhone5S: 320*480px
   • iPhone6~iPhone6S: 375*627px
   • iPhone6 Plus~iPhone6S Plus: 414*736px

3. ideal viewport
   它类似于布局视口，但宽度和视觉视口相同，这就是完美视口 ideal viewport ，为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone7 为 375px, iphone7p 为 414px。，用户不用缩放和拖动网页就能够很好的进行网页浏览。而完美视口也是通过 viewport meta 的某种设置来达到。

适配

<meta
  name="viewport"
  content="width=device-width,initial-scale=1,user-scale=no"
/>

• width 用来定义 layout viewport 的宽度，如果不指定该属性（或者移除 viewport meta标签），则 layout viewport 宽度为默认值。

• width=device-width 此时的layout viewport将成为ideal viewport，因为layout viewport宽度与设备视觉视口宽度一致了， 这是移动端适配不可或缺的步骤

• initial-scale 设置页面的初始缩放值，并且这个初始缩放值是相对于 ideal viewport 缩放的，最终得到的结果不仅会决定 visual viewport，还会影响到 layout viewport

• user-scalable 是否允许用户进行缩放的设置

设备像素比 dpr 与 rem 的适配方案

rem 是相对于根元素 html 的 font-size 来做计算。通常在页面初始化时加载时通过对 document.documentElement.style.fontSize 设置来实现。

最后更新日期 2019-03-14