移动端适配，可能会遇到的问题：

1)1px问题

2)UI图完美适配方案

3)iPhoneX适配方案

4)横屏适配

5)高清屏模糊问题

从移动端适配的基础概念出发，探究移动端适配各种问题的解决方案和实现原理。

* [ ] 英寸(inch，in)

描述屏幕的物理大小(屏幕对角的长度)

* [ ] 分辨率

1)像素

像素即一个小方块，具有特定的位置和颜色。

像素是图片或电子屏幕的最小组成单位。

2)屏幕分辨率

指一个屏幕具体由多少个像素点组成。

分辨率高不代表屏幕就清晰，屏幕的清晰程度还与尺寸有关。

3)图像分辨率

图片含有的像素数。

同一张图片，分辨率越高，图片越清晰。

4)PPI

每英寸包括的像素数

5)DPI：没英寸包括的点数

* [ ] 设备独立像素(DIP DP)(css像素)

Retina Display(视网膜屏幕)

1)设备像素比(dpr)

即**物理像素和设备独立像素的比值**。

web中，浏览器提供**window.devicePixelRatio**来获取dpr

css中，可以媒体查询**min-device-pixel-ratio**，区分dpr；

~~~

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ }

~~~

* [ ] 移动端开发

在ios、Android开发中，样式单位其实使用的是**设备独立像素(css像素)**

为了视频所有的机型，写样式时需要把物理像素转换为设备独立像素。

例如：200px(物理像素)，iphone6的设备像素比是2，则height为100pt。

* [ ] web端开发

css时，最多的单位是px，即css像素，当页面缩放比例是100%时，一个css等于一个设备独立像素。

页面的缩放系数 = css像素/设备独立像素

* [ ] 视口

viewport，代表当前可见的计算机图形区域。

1)布局视口

是网页布局的基准窗口，在pc浏览器上，布局视口等于当前浏览器的窗口大小。

在移动端，布局视口被赋予一个默认值，大部分为980px，保证pc的页面可以在手机浏览器上呈现，但非常小，用户可以手动放大

`document.documentElement.clientWidth / clientHeight`来获取布局视口大小。

2)视觉视口

通过屏幕真实看到的区域。

视觉视口默认等于当前浏览器的窗口大小

当用户对浏览器进行缩放时，**不会改变布局视口的大小，所以也没布局是不变的，但是缩放会改变视觉视口的大小**。

3)理想视口

网站也没在移动端展示的理想大小。

布局视口在移动端展示的效果不是一个理想的效果。

当页面缩放比例100%时，css像素= 设备独立像素，理想视口= 视觉视口。

4)Meta viewport

``告诉浏览器如何解析页面。

借助meta的viewport帮助我们设置视口，缩放等。

~~~

~~~

width：定义布局视口的宽度(device-width)

height：定义布局视口的高度

initial-scale：定义页面初始缩放比率

minimum-scale：缩放最小值

maximum-scale：缩放的最大值

user-scalable：一个布尔值，缩放页面

5)移动端适配

为了在移动端让页面获得更好的显示效果，必须让布局视口、视觉视口尽可能等于理想视口

device-width就是理想视口的宽度。

这时，1个css像素就等于1个设备独立像素，而且我们也是基于理想视口来进行布局的，所以呈现出来的页面在各种设备上都能大致相似

6)缩放

width可以决定布局视口的宽度，但不是布局视口的唯一决定性因素，缩放也会影响。

例如：400px ，缩放为2，

此时视觉窗口的宽度=理想视口宽度/innitial-scale 为200px

布局视口去两者最大值，即400px。

7)获取浏览器大小

* `window.innerHeight`：获取浏览器视觉视口高度(包括垂直滚动条)。

* `window.outerHeight`：获取浏览器窗口外部的高度。表示整个浏览器窗口的高度，包括侧边栏、窗口镶边和调正窗口大小的边框。

* `window.screen.Height`：获取获屏幕取理想视口高度，这个数值是固定的，`设备的分辨率/设备像素比`

* `window.screen.availHeight`：浏览器窗口可用的高度。

* `document.documentElement.clientHeight`：获取浏览器布局视口高度，包括内边距，但不包括垂直滚动条、边框和外边距。

* `document.documentElement.offsetHeight`：包括内边距、滚动条、边框和外边距。

* `document.documentElement.scrollHeight`：在不使用滚动条的情况下适合视口中的所有内容所需的最小宽度。测量方式与`clientHeight`相同：它包含元素的内边距，但不包括边框，外边距或垂直滚动条。

* [ ] 1px问题

**在设备像素比大于1的屏幕上，写的1px实际上是被多个物理像素渲染，就会出现1px在有些屏幕上看起来很粗的现象。**

1)border-image

2)background-image

3)伪类+transform

基于媒体查询判断不同的设备像素比对线条进行缩放

~~~

.border_1px:before{

content: '';

position: absolute;

top: 0;

height: 1px;

width: 100%;

background-color: #000;

transform-origin: 50% 0%;

}

@media only screen and (-webkit-min-device-pixel-ratio:2){

.border_1px:before{

transform: scaleY(0.5);

}

}

@media only screen and (-webkit-min-device-pixel-ratio:3){

.border_1px:before{

transform: scaleY(0.33);

}

}

如果需要满足圆角，加上border-radius即可

~~~

4)svg

5)设置viewport

通过设置缩放，让css像素等于真正的物理像素

~~~

const scale = 1 / window.devicePixelRatio;

const viewport = document.querySelector('meta[name="viewport"]');

if (!viewport) {

viewport = document.createElement('meta');

viewport.setAttribute('name', 'viewport');

window.document.head.appendChild(viewport);

}

viewport.setAttribute('content', 'width=device-width,user-scalable=no,initial-scale=' + scale + ',maximum-scale=' + scale + ',minimum-scale=' + scale);

~~~

这是早先flexible采用的方案，

代价：页面上所有的布局都要按照物理像素来下，不现实。

* [ ] 移动端适配方案

1)flexible方案

早期移动端适配方案，引用flexible后，页面统一rem布局

rem是相对于html节点的font-size来做计算的。

被弃用

2)vh，vw方案

vh，vw方案将视觉视口宽度window.innerWidth和视觉视口gaudywindow.innerHeight分为100份。

vw，vh，vmin，vmax

我们可以**使用PostCss的postcss-px-to-viewport插件**帮助完成这个过程。

calc

* [ ] 适配iPhoneX

取消了物理按键，改成底部的小黑条

1)安全区域

三个改动：圆角，刘海，小黑调。

安全区域就是一个不受上面三个效果的可是窗口范围。

为了保证页面的显示效果，我们必须把页面限制在安全范围内，但不影响整体效果。

2)viewport-fit

专门为了适配iPhoneX而诞生的一个属性，限制网页如何在安全区域进行展示。

contain：可视窗口完全包含网页内容

cover：网页内容完全覆盖可是窗口。

默认情况下或者设置为auto和contain效果相同。

3)env，constant

我们需要将顶部和底部合理的摆放在安全区域内，IOS11新增了两个css函数，env、constant，用于设定安全区域与边界的距离

* `safe-area-inset-left`：安全区域距离左边边界距离

* `safe-area-inset-right`：安全区域距离右边边界距离

* `safe-area-inset-top`：安全区域距离顶部边界距离

* `safe-area-inset-bottom`：安全区域距离底部边界距离

注意，我们必须指定viewport-fit后才能使用这两个函数

~~~

~~~

`constant`在`iOS < 11.2`的版本中生效，`env`在`iOS >= 11.2`的版本中生效，这意味着我们往往要同时设置他们，将页面限制在安全区域内：

~~~

body {

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

~~~

当使用底部固定导航栏是，我们需要设置padding值

~~~

{

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

~~~

* [ ] 横屏适配

很多视口我们要对横屏和竖屏显示不同布局，所以我们需要检测不同场景下给定不同的样式

1)JavaScript检测横屏

`window.orientation`:获取屏幕旋转方向

~~~

window.addEventListener("resize", ()=>{

if (window.orientation === 180 || window.orientation === 0) {

// 正常方向或屏幕旋转180度

console.log('竖屏');

};

if (window.orientation === 90 || window.orientation === -90 ){

// 屏幕顺时钟旋转90度或屏幕逆时针旋转90度

console.log('横屏');

}

});

~~~

2)css检测横屏

~~~

@media screen and (orientation: portrait) {

/*竖屏...*/

}

@media screen and (orientation: landscape) {

/*横屏...*/

}

~~~

* [ ] 图片模糊问题

*1)产生原因

图片上每个像素对应在屏幕上使用一个屋里像素来渲染，才能达到最佳的显示效果。

在dpr>1的屏幕上，位图的一个像素可能有多个物理像素来渲染，然而这些物理像素点不能准确的分配上对应位图像素的颜色，只能去近似值。

2)解决方案

针对不同的dpr的屏幕，展示不同分辨率的图片

在`dpr=2`的屏幕上展示两倍图`(@2x)`，在`dpr=3`的屏幕上展示三倍图`(@3x)`。

3)媒体查询

使用media查询判断不同的设备像素比来显示不同精度的图片