iPhoneX适配方案

梦里梦外; 2022-06-04 00:18 387阅读 0赞

# 绝对长度单位 #

# 相对长度单位 #

是网页设计中使用最多的长度单位，包括`px、em、rem`等

# 屏幕尺寸 #

![image][]

> 指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米

<table> 
 <thead> 
  <tr> 
   <th>iPhone 4/4S</th> 
   <th>iPhone 5/5C/5S/SE</th> 
   <th>iPhone 6/6S</th> 
   <th>iPhone 6S Plus</th> 
   <th>iPhone 7</th> 
   <th>iPhone 7 Plus</th> 
   <th>iPhone 8</th> 
   <th>iPhone 8 Plus</th> 
   <th>iPhone X</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>3.5英寸</td> 
   <td>4英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>5.8英寸</td> 
  </tr> 
 </tbody> 
</table>

# 屏幕分辨率 #

指在横纵向上的像素点数，单位是**px**，1px=1个像素点。一般以`纵向像素*横向像素`来表示一个手机的分辨率，如1960\*1080（这里的1像素指的是物理设备的1个像素点）

<table> 
 <thead> 
  <tr> 
   <th>机型</th> 
   <th>分辨率</th> 
   <th>机型</th> 
   <th>分辨率</th> 
   <th>机型</th> 
   <th>分辨率</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>iPhone 4/4S</td> 
   <td>960*640</td> 
   <td>iPhone 6S Plus</td> 
   <td>1920*1080</td> 
   <td>iPhone 8 Plus</td> 
   <td>1920*1080</td> 
  </tr> 
  <tr> 
   <td>iPhone 5/5S</td> 
   <td>1136*640</td> 
   <td>iPhone 7</td> 
   <td>1334*750</td> 
   <td>iPhone X</td> 
   <td>2436*1125</td> 
  </tr> 
  <tr> 
   <td>iPhone SE</td> 
   <td>1136*640</td> 
   <td>iPhone 7 Plus</td> 
   <td>1920*1080</td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>iPhone 6/6S</td> 
   <td>1334*750</td> 
   <td>iPhone 8</td> 
   <td>1334*750</td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

# 屏幕像素密度 #

![image][image 1]

屏幕上每英寸可以显示的像素点的数量，单位是**ppi**，即**pixels per inch**的缩写。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小

![image][image 2]

*  屏幕上勾股定理算出对角线的分辨率：**√(1920²+1080²)≈2203px**
 *  对角线分辨率除以屏幕尺寸：**2203/5≈440dpi**

1920^2 + 1080^2 ≈ 2203^2  //3686400 + 1166400 = 4852800
    2203 / 5 ≈ 440

# PPI与DPI #

![image][image 3]

PPI（Pixel Per Inch by diagonal）：表示沿着对角线，每英寸所拥有的像素（Pixel）数目  
PPI数值越高，代表显示屏能够以越高的密度显示图像，即通常所说的分辨率越高、颗粒感越弱

<table> 
 <thead> 
  <tr> 
   <th>ppi与dpi</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ppi</td> 
   <td><code>pixels per inch</code>，屏幕上每英寸可以显示的像素点的数量，即屏幕像素密度</td> 
  </tr> 
  <tr> 
   <td>dpi</td> 
   <td><code>dots per inch</code>，最初用于衡量打印物上每英寸的点数密度，就是打印机可以在一英寸内打多少个点。当dpi的概念用在计算机屏幕上时，就称之为ppi。ppi和dpi是同一个概念，Android比较喜欢使用dpi，IOS比较喜欢使用ppi</td> 
  </tr> 
 </tbody> 
</table>

# Viewport #

移动端开发中，通常我们都会采用`meta`标签设置`viewport`

## viewport是什么? ##

![image][image 4]

通俗来讲，移动端的viewport就是我们所能看到的手机端浏览器的可视窗口大小，但viewport又不仅仅局限于可视窗口的大小，一般情况下，它是比默认窗口大小要大的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动端正常显示为桌面浏览器而设计的网页，移动端的浏览器都会默认把自己的默认的viewport设为980px到1024px不等，但其后果就是会出现横向滚动条，因为移动端浏览器可视区域的大小是比默认的viewport宽度要小的

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>width</td> 
   <td>设置layout viewport的宽度，为一个正整数，或字符串”device-width”</td> 
  </tr> 
  <tr> 
   <td>initial-scale</td> 
   <td>设置页面的初始缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>minimum-scale</td> 
   <td>允许用户的最小缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>maximum-scale</td> 
   <td>允许用户的最大缩放值，为一个数字，可以带小数</td> 
  </tr> 
  <tr> 
   <td>height</td> 
   <td>设置layout viewport 的高度，这个属性对我们并不重要，很少使用</td> 
  </tr> 
  <tr> 
   <td>user-scalable</td> 
   <td>是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许</td> 
  </tr> 
 </tbody> 
</table>

## 不同的设备对1px有不一样的定义 ##

在css中我们一般使用px作为单位，在桌面浏览器中css的1个像素往往都是对应着电脑屏幕的1个物理像素，这可能会造成我们的一个错觉，那就是css中的像素就是设备的物理像素。但实际情况却并非如此，css中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物理像素是不同的。在为桌面浏览器设计的网页中，我们无需对这个津津计较，但在移动设备上，必须弄明白这点。在早先的移动设备中，屏幕像素密度都比较低，如iphone3，它的分辨率为320x480，在iphone3上，一个css像素确实是等于一个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像素密度越来越高，从iphone4开始，苹果公司便推出了所谓的Retina屏，分辨率提高了一倍，变成640x960，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这时，一个css像素是等于两个物理像素的。

在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是`devicePixelRatio = 物理像素 / 独立像素`。css中的px就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。例如，在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素

其实就是移动端和PC端的px是不同的，移动端的屏幕可视区域(viewport)小但像素多，所以跟PC相比的每个独立像素点的物理像素是多的，也就是移动端物理像素更密集，所以更PC的独立像素有`dp`的倍数转换

在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。

## 物理像素(physical pixel) ##

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。

## 设备独立像素(density-independent pixel) ##

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

## 设备像素比(device pixel ratio ) ##

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

还可以通过window.devicePixelRatio获取到当前设备的dpr

window.devicePixelRatio

<table> 
 <thead> 
  <tr> 
   <th>机型</th> 
   <th>iPhone 3G/3GS</th> 
   <th>iPhone 4/4S</th> 
   <th>iPhone 5/5C/5S/SE</th> 
   <th>iPhone 6/6S</th> 
   <th>iPhone 6S Plus</th> 
   <th>iPhone 7</th> 
   <th>iPhone 7 Plus</th> 
   <th>iPhone 8</th> 
   <th>iPhone 8 Plus</th> 
   <th>iPhone X</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>屏幕尺寸</td> 
   <td>3.5英寸</td> 
   <td>3.5英寸</td> 
   <td>4英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>4.7英寸</td> 
   <td>5.5英寸</td> 
   <td>5.8英寸</td> 
  </tr> 
  <tr> 
   <td>独立像素(CSS像素)</td> 
   <td>480*320</td> 
   <td>480*320</td> 
   <td>568*320</td> 
   <td>667*375</td> 
   <td>736*414</td> 
   <td>667*375</td> 
   <td>736*414</td> 
   <td>667*375</td> 
   <td>736*414</td> 
   <td>812*375</td> 
  </tr> 
  <tr> 
   <td>物理像素(分辨率)</td> 
   <td>480*320</td> 
   <td>960*640</td> 
   <td>1136*640</td> 
   <td>1334*750</td> 
   <td>1920*1080(2208x1242)</td> 
   <td>1334*750</td> 
   <td>1920*1080</td> 
   <td>1334*750</td> 
   <td>1920*1080</td> 
   <td>2436*1125</td> 
  </tr> 
  <tr> 
   <td>ppi/dpi(像素密度)</td> 
   <td>163</td> 
   <td>326</td> 
   <td>326</td> 
   <td>326</td> 
   <td>401</td> 
   <td>326</td> 
   <td>401</td> 
   <td>326</td> 
   <td>401</td> 
   <td>458</td> 
  </tr> 
  <tr> 
   <td>dpr(倍图)</td> 
   <td>1</td> 
   <td>2</td> 
   <td>2</td> 
   <td>2</td> 
   <td>3(2.5)</td> 
   <td>3</td> 
   <td>3</td> 
   <td>3</td> 
   <td>3</td> 
   <td>3(2.9)</td> 
  </tr> 
 </tbody> 
</table>

如果APP要同时兼容iPhone3GS~iPhone6+，则需要提供icon.png/icon@2x.png/icon@3x.png三种分辨率的图片

在Android中，规定以160dpi为基准，1dp=1px。如果密度是320dpi，则1dp=2px，以此类推

2K分辨率指的是屏幕分辨率达到了一种级别,指屏幕横向像素达到2000以上（iPhone X是2K屏）

# iPhoneX的适配 #

## background-color ##

如果网页设置了一个背景颜色，那么最简单解决方案是，在body节点设置`background-color`，使背景颜色填充整个屏幕，从而解决横屏显示左右白边的问题

## viewport-fit ##

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=auto">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=contain">
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

<table> 
 <thead> 
  <tr> 
   <th>viewport-fit</th> 
   <th>描述</th> 
   <th>示例</th> 
   <th>示例</th> 
   <th>示例</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>auto/contain</td> 
   <td>默认值，页面内容显示在<code>safe area</code>内</td> 
   <td><a href="https://wscats.github.io/iPhone-X/viewport-fit/contain/" rel="nofollow">示例1</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td>cover</td> 
   <td>页面内容充满屏幕</td> 
   <td><a href="https://wscats.github.io/iPhone-X/viewport-fit/cover/cover.html" rel="nofollow">示例1</a></td> 
   <td><a href="https://wscats.github.io/iPhone-X/viewport-fit/cover/sefe-cover.html" rel="nofollow">示例2</a></td> 
   <td><a href="https://wscats.github.io/iPhone-X/viewport-fit/min-max/" rel="nofollow">示例3</a></td> 
  </tr> 
  <tr> 
   <td>横屏列表侧刘海</td> 
   <td>横屏下列表环绕刘海</td> 
   <td><a href="https://wscats.github.io/iPhone-X/css-shape-iphoneX/iPhoneX3.html" rel="nofollow">示例1</a></td> 
   <td></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

设置auto前  
![image][image 5]  
设置cover后  
![image][image 6]

## safe-area-inset-\* ##

在设置`viewport-fit=cover`之后，Web中会新增四个常量

safe-area-inset-top
    safe-area-inset-right
    safe-area-inset-left
    safe-area-inset-bottom

分别表示safe area和可视窗口viewport顶部，右边，左边，底部的间距，可以用于设置margin和padding或者绝对定位时left和top

> 注意：在横屏和竖屏状态下，safe-area-inset-\*的值不同

![image][image 7]

为了解决应用`viewport-fit=cover`之后，有些显示内容被裁剪的问题，我们可以通过添加边距使得网页主要内容处于safe area中不被裁剪，解决方式如下

padding: constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);

![image][image 8]

示例，比如下面是顶部导航条的适配，能让左上右都能出现padding来让元素保留在安全区域以内

总结为，我们可以利用`safe-area-inset-*`做以下适配，详细请看[DEMO][]

*  竖屏下，对底部做`padding-bottom: constant(safe-area-inset-bottom);`，其他设置是无意义的
 *  横屏下，对底部设置左，下，右的`safe-area-inset-*`，对头部设置左和右的`safe-area-inset-*`，其他设置也是无意义的

<header><button>返回</button> 头部</header>
    <style> * { margin: 0;padding: 0;} body { width: 100%;height: 100%; //设置背景颜色，也是一种适配方案 background-color: #A4F4B0; } header { background-color: red;height: 50px;line-height: 50px;width: 100%;color: white;position: fixed;left: 0;right: 0;top: 0;bottom: 0px; //cover下元素出现对应的padding来适配 padding-left: constant(safe-area-inset-left); padding-right: constant(safe-area-inset-right); //padding-bottom: constant(safe-area-inset-bottom); padding-top: constant(safe-area-inset-top); } button { display: inline-block;background-color: blue;color: white;border: none;height: 50px;width: 80px; //字体记得必须设置，不然按钮会有像素的误差 font-size: 18px; } </style>

## 媒体查询 ##

<table> 
 <thead> 
  <tr> 
   <th></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>device-width</td> 
  </tr> 
  <tr> 
   <td>device-height</td> 
  </tr> 
  <tr> 
   <td>-webkit-device-pixel-ratio</td> 
  </tr> 
 </tbody> 
</table>

注意`-webkit-device-pixel-ratio`必须加前缀，否则无效

/*iPhoneX的适配*/
    @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
        header { background-color: black; }
    }
    /*iPhone8P的适配*/
    @media only screen and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) {
        header { background-color: deepskyblue; }
    }

# 参考文档 #

*  [iPhone-X适配方案][iPhone-X]
 *  [移动端高清、多屏适配方案][Link 1]
 *  [手淘移动端适配的方案学习和相关思考][Link 2]
 *  [手淘适配方案lib-flexible][lib-flexible]

# iPhone X适配参考文档 #

*  [iPhone X的Web设计][iPhone X_Web]
 *  [剖析 iOS 11 网页适配问题][iOS 11]
 *  [关于H5页面在iPhoneX适配][H5_iPhoneX]

[image]: /images/20220604/c7bfbf23f5ef492a8484a2e74de35f95.png
[image 1]: /images/20220604/80860726abab40e699fcb5b68a8f1a89.png
[image 2]: /images/20220604/438e8993b4b341ec93a9ef627e92fb94.png
[image 3]: /images/20220604/dd7895a4d3a046ee92083ee4da447cb6.png
[image 4]: /images/20220604/e99eaaee0c0d47bca7f0db72db142214.png
[image 5]: /images/20220604/0dc0108d98424fc4a7e9965f73f319dd.png
[image 6]: /images/20220604/1c8be5c817794bf6935c2b5eee0e56ac.png
[image 7]: /images/20220604/f2f0e54a47404a5cad0126f3b13d2fa4.png
[image 8]: /images/20220604/e1cf5301af8d4c35b461027e732d4371.png
[DEMO]: https://wscats.github.io/iPhone-X/css-shape-iphoneX/iPhoneX5.html
[iPhone-X]: https://github.com/Wscats/iPhone-X
[Link 1]: http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041
[Link 2]: http://blog.csdn.net/liujie19901217/article/details/51982403
[lib-flexible]: https://github.com/amfe/lib-flexible
[iPhone X_Web]: https://www.w3cplus.com/mobile/designing-websites-for-iphone-x.html
[iOS 11]: https://objcer.com/2017/09/21/Understanding-the-WebView-Viewport-in-iOS-11-iPhone-X/
[H5_iPhoneX]: https://www.cnblogs.com/lolDragon/p/7795174.html