移动端开发基础知识扫盲

以iphone6为例，可知道：

分辨率 ：1334pt x 750pt

指的是屏幕上垂直有1334个物理像素，水平有750个物理像素。

1、物理像素又叫“设备像素”，他是显示设备中最微小的物理部件，每个像素可以根据操作系统设置
自己的颜色和亮度，正是这些微小距离欺骗我们的眼睛从而看到图像效果。
2、物理像素也是厂商在出厂时就设置好了的————即一个设备的分辨率是固定不变的。复制代码

其换算公式如下：

PPI最直观的的效果可以参考下图：

带着这个定义我们来看页面在浏览器中的缩放情况：

首先我们假如有一个2px * 2px 宽高的盒子。根据定义在100%缩放情况下 2px * 2px 是完全等同于 2px * 2px的物理像素。

如果现在去缩放浏览器，我们会发现2px*2px的尺寸会随着缩放而发生变化。实际上现代浏览器的缩放功能就是通过拉伸像素的方式实现的。而这种拉伸像素的方式也更能够让我们清晰了解独立像素与物理像素之间的差异。

首先，我们可以很明确的知道，浏览器不管怎么拉伸像素它也不可能改变物理层面上的像素(物理像素)，所以它能也只能够改变自己的逻辑像素 - CSS像素，在放大的情况下 1css像素 会占据多个物理像素，从而在应用层面上使显示区域宽度变小，浏览器为了能够显示完整的内容从而出现滚动条，而缩小的情况下，多个css像素会被合并在一个1个物理像素中去显示。但是这种方式实际上是一种有损的过程，因为用1个物理像素去表示多个CSS像素，会导致内容丢失更多的细节。正是因为css像素的丢失，才导致内容变的更小。

更直观的了解可以看下图：

100%模式下 1css像素就等于 1物理像素

在放大的情况下，1css像素会占据多个物理像素

在缩小的情况下，多个css像素会被合并在物理像素中

视口 viewport

1.1 viewport 基础

viewport 解释为中文就是‘视口’的意思，也就是浏览器中用于显示网页的区域。在 PC 端，其大小也就是浏览器可视区域的大小，所以我们也不会太关注此概念；而在移动端，绝大多数情况下 viewport 都大于浏览器可视区，保证 PC 页面在移动浏览器上面的可视性。为提升可视性体验，针对移动端有了对 viewport 的深入研究。

1.2 viewport 详解

在移动端有三种类型的 viewport: layoutviewport、visualviewport、idealviewport。具体解释如下：

• layoutviewport: 大于实际屏幕， 元素的宽度继承于 layoutviewport，用于保证网站的外观特性与桌面浏览器一样。layoutviewport 到底多宽，每个浏览器不同。iPhone 的 safari 为 980px，通过 document.documentElement.clientWidth 获取。
• visualviewport: 当前显示在屏幕上的页面，即浏览器可视区域的宽度。
• idealviewport: 为浏览器定义的可完美适配移动端的理想 viewport，固定不变，可以认为是设备视口宽度。比如 iphone 7 为 375px, iphone 7p 为 414px。

1.3 viewport 设置

我们通过对几种 viewport 设置可以对网页的展示进行有效的控制，在移动端我们经常会在 head 标签中看到这段代码：

<meta name='viewport' content='width=device-width,initial-scale=1,user-scale=no' />
复制代码复制代码

通过对 meta 标签三个 viewport 的设置，最终使页面完美展示。下面详细的阐释其具体含义:

• width 设置的是 layoutviewport 的宽度
• initial-scale 设置页面的初始缩放值，并且这个初始缩放值是相对于 idealviewport 缩放的，最终得到的结果不仅会决定 visualviewport，还会影响到 layoutviewport
• user-scalable 是否允许用户进行缩放的设置

对上面的说明通过公式推导进行进一步的解释：

// 设定两个变量：  
viewport_1 = width;  
viewport_2 = idealviewport / initial-scale;

// 则：  
layoutviewport = max{viewport_1, viewport_2};  
visualviewport = viewport_2;
复制代码复制代码

只要 layoutviewport === visualviewport，页面下面不会出现滚动条，默认只是把页面放大或缩小。