移动端开发目前主要包含三类：

• 原生App开发：IOS、Android、RN、uniapp、Flutter等
• 小程序开发：原生小程序、uniapp、Trao等
• Web页面：移动端的web页面，可以使用浏览器或者webview浏览

一、认识视口 viewport

在一个浏览器中，我们可以看到的区域就是视口（viewport）：

• 在PC端页面中，我们不需要对视口进行区分，因为布局视口与视觉视口是同一个；

• 在移动端，布局视口与视觉视口是不同的：

  • 移动端的网页窗口往往比较小，我们可能会希望将一个大的网页在移动端可以完整的展示；因此默认情况下，移动端的布局视口是大于视觉视口的

因此在移动端，我们将视口划分为以下三种：

• 布局视口
• 视觉视口
• 理想视口

这些概念，事实上来自于 A tale of two viewports — part two (quirksmode.org)；接下来介绍一下三种视口，一定要看懂、理解，否则后面的系列会很难掌握。

二、视口

2.1、布局视口

布局视口（layout viewport）是 html 元素的父容器，只要不在 CSS 或 JS 中修改元素的宽度，元素的宽度就会撑满布局视口的宽度：

• 在 CSS 中可以通过 meta 标签设置 viewport 来改变
• 在 JS 中，我们可以通过 document.documentElement.clientWidth 来获取或改变布局视口的大小

默认布局视口大小：

• 移动端默认布局视口大小为 980px

因此，当 html 页面中某个元素的宽度大于 980px 时，移动设备浏览器显示该元素时会出现横向滚动条。

换个说法来理解，布局视口就是我们开发时在 html 页面时，通过 CSS 设置元素的画布

那么接下来，自然会有疑问？

• 在移动端，我们基于默认布局视口大小980px开发的页面是如何显示到移动设备上的？ 那么就需要了解视觉视口

2.2、视觉视口

视觉视口（visual viewport），顾名思义就是用户直观看到的区域；

当我们在开发页面时，通过 F12 进入手机模式调试时，看到的区域就是视觉视口，如下图：

我们在开发过程中，为元素设置的宽度（ CSS像素【单位：px】）是相对于布局视口（即 meta 标签中设置的 viewport 的值）来说的，等到页面在展示时，元素的可视大小不一定等于元素的CSS像素，例如：为一个div设置宽度为100px，当页面缩放为100%时，我们通过F12可以看到div的CSS像素为100px，可视大小也为100px（通过截图工具可以量出来），此时 1px 占了 1个像素；当页面放大到200%时，我们通过F12可以看到div的CSS像素依然为100px，但是由于视觉视口放大了2倍，此时 1px 占了 0.5 个像素，所以直观效果是 div 变大了，如下动画：

视频展示不了

通过布局视口我们知道，移动设备的默认布局视口大小是 980px，当我们为 div 设置为 100px 时，在PC端网页按照100%展示（不进行缩放时），实际看到的就是 100px 的大小，但是在手机端看到的视觉效果是等比例缩放后的，以 iphone6 为例，手机端的视觉视口宽度为375px 小于默认的布局视口 980px，100px 的div 就会等比缩小展示在视觉视口，如下对比图（左侧为PC端展示的 100px 的 div，右侧为 iphone6 看到的 100px 的 div）：

在介绍完 布局视口 与 视觉视口后，再来看看下面两张图理解下：

布局视口 用 css 像素来衡量尺寸，在缩放、调整浏览器窗口的时候不会改变；缩放、调整浏览器窗口改变的只是 视觉视口。

2.3、理想视口

理想视口（ideal viewport）：当设备出厂时，厂家就已经给出了当前设备展示的最佳设备独立像素，在最佳设备独立像素中进行html页面展示，页面就会完美适配到设备中；那么，当我们在开发中，将布局视口的大小设置为最佳设备独立像素时，此时布局视口就称为理想视口

在浏览器中，通过 F12 看到的各种移动设备的视觉视口大小恰好等于设备的理想视口大小，这也是为了我们开发人员方便调试；

 这个概念最早由苹果提出，其他浏览器厂商陆续跟进，目的是解决在布局视口下页面元素过小的问题，显示在理想视口中的页面具有最理想的宽度，用户无需进行缩放。所谓理想视口，即页面绘制区域可以完美适配设备宽度的视口大小，不需要出现滚动条即可正常查看网站的所有内容，且文字图片清晰，如所有iphone6的理想视口宽度为375px等等

如下图描述的是各种设备的理想视口（出自：device metrics），其中设备独立像素列代表设备的理想视口

其中：

• 设备独立像素为厂家给的最佳设备独立像素（理想视口）
• 设备像素为设备的物理分辨率

理解了上面三种视口之后，我们的问题就是：

问：如何将宽度为750px的设计稿（最常见的设计稿宽度，当然也有其他宽度的）完美的展示到各种设备中？

答：根据前面的学习，我们可以知道，将750px的设计稿完美展示到设备中，只需要将750px的设计稿等比例适配到设备的理想视口中即可，而不是适配到默认的*布局视口（980px）*中，这样移动设备就会完美适配；

以 iphone6 为例：我们作为前端开发要做的就是将设计稿按照理想视口动态适配即可

接下来我们就开始介绍各种适配方案