移动端适配的思考移动端适配的思考概念解析分辨率屏幕分辨率：3440 * 1440 （垂直和水平上具有的物理像素点数

概念解析

分辨率
- 屏幕分辨率：3440 * 1440 （垂直和水平上具有的物理像素点数）
- 图像分辨率：图片含有的像素数。
PPI：每英寸包含的像素数（值越高，图片或显示器的质量越高，看起来越细腻）
DPI：每英寸包含的点数（描述图片或显示屏时，通常与PPI等价）
- 可以用来描述打印机每英寸包含的打印点数。
设备独立像素（逻辑像素）（DIP）
- 这个概念由iphone4的发布引出。因为随着手机屏幕的物理分辨率的快速提升，为了兼容一些资源的显示效果，而提出来的。
- 300个DIP在低分辨率的手机可能是用300个物理像素去渲染，在高分辨率手机可能是用600像素去渲染。
  - 日常聊天中需要根据语境判断1像素所表达的是物理像素 | 逻辑像素。
- 至于实际上使用多少像素进行渲染，需要根据下面这个单位判断。
设备像素比（DPR）
- 物理像素和设备独立像素的比值
- 如何获取DPR
  - js:window.devicePixelRatio
  - css: 媒体查询@media(-webkit-min-device-pixel-ratio: 2)
  - RN：PixelRatio.get()
- 但由于安卓的设备比较多，分辨率高低跨度大
  - 将设备分辨率分为几个区间
    - 360x480 | 480x800 | 720x1280 | 1080x1920 | 1440x2560

实际开发中对于尺寸的思考

移动端开发
- ios - pt | android - dp
- 实际开发中，需要根据设计图，将对应的像素大小对pt & dp进行转换
web开发
- 一般都是使用px单位
  - px：是css像素。当页面缩放比例为100%时，1px等于一个DIP。

移动端适配

为什么要适配
- 移动端的不同分辨率的显示器，所展示像素点不同。相同布局的页面放到不同设备，显示效果会错乱。
如何进行适配
- 首先设置<meta name="viewport">的width = device-width & initial-scale=1
  - <meta>：表示那些不能由其他html元素表示的任何元数据信息。
  - <meta name="viewport">还有其他相关例如限制页面缩放等配置可以写在这里。
- 使用弹性布局flex
  - 使布局的时候尽量自适应。
- 使用rem的解决方案 - 阿里的flexible
  - 当时的vw & vh的兼容性比较差。
  - 什么是rem | em
    - rem是css3出来的一个新的单位。为html根元素设定的font-size的大小。
    - em相当于对象内部的字体大小。
  - 如何做到适配（js根据显示窗口的大小，对html根元素的字体大小进行调整）
    - 通过设备宽度 / 默认设计稿宽度得到一个缩放比例
    - 然后再对字体大小进行调整（1rem的大小和设备宽度成正比）
    - 实际开发的时候通过配置postcss-px2rem进行自动转换
- 使用vw & vh
  - 视觉视口（visual viewport）：用户通过屏幕真实看到的区域。默认等价于浏览器的窗口大小。
  - 1vw相当于视觉视口宽度的1%。
  - 正常开发使用post-px-to-viewport帮助我们进行转换。
  - 缺点：px转vw由于不一定能完全整除，所以会有一定的误差。
1px问题
- 由于现在手机屏存在逻辑分辨率，所以存在有一个dpr - 物理像素和设备独立像素的比值。基于这个原因，我们写的1px的边框，在真正的显示上可以能会变粗。如果是2倍屏则为2px。
- 解决方案
  - css通过媒体查询，判断是否2倍屏 | 3倍屏。然后利用transform的scale缩放属性，进行缩小。
  - 使用图片代替（可以使用svg代替引入的图片）

适配iPhonex

iPhonex 带来了什么
- 圆角，黑边，小黑条
- 安全区域的概念：不受上面三个效果影响的可视窗口范围。
viewport-fit
- <meta name=viewport>中特地引入了viewport-fit属性，为了适配iphonex所带来的问题。
- viewport-fit=contain：这是默认情况，可视窗口完全包含网页内容。
- viewport-fit=cover：网页内容完全覆盖可视窗口。
constant | env函数
- 在css中使用contant | env函数可以用来设定安全区域与边界的距离。
  - 这两个函数作用相同，兼容性不同。（正式开发建议两个都写上）
    - contant：兼容 11.0 < IOS < 11.2
    - env：兼容 IOS >= 11.2
  - safe-area-inset-(left | right | top | bottom)：安全区域距离（左 | 右 | 上 | 下）边界的距离

如何适配

设置viewport-fit=cover
顶部一般不需要解决（宿主会帮我们搞定）

解决小黑条挡到内容

body: { 
    padding-bottom: contant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

移动端适配的思考

概念解析

实际开发中对于尺寸的思考

移动端适配

适配iPhonex

参考资料