移动端适配，可能会遇到的问题：
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查询判断不同的设备像素比来显示不同精度的图片
2018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
