iPhone X 响应式设计总结。

User Agent

如果在 iPhone X 上使用微信浏览器打开某个页面，在后端语言或者JS中，大致可以探测到如下：

Mozilla/5.0 (iPhone; CPU iPhone OS 11_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15F79 MicroMessenger/6.7.0 NetType/4G Language/zh_CN

HTML

viewport 值：

<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">

CSS

为了不让刘海遮住，还要这样

.container {
  / Fallback /
  padding:0 10px;
  
  / iOS 11 /
  padding-left: constant(safe-area-inset-left);
  padding-right: constant(safe-area-inset-right);
  
  / iOS 11.2+ /
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);}

使用Mac上的Safari开发工具来检查iOS模拟器Safari中的元素(或任何连接的iOS设备)，还要：

.container {
  / env() for iOS 11.2+, otherwise constant() /
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);}

iPhone X 的 CSS 选择器

 @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
.we-container{}}</pre><p><br/></p><p style="box-sizing: border-box; color: rgb(53, 60, 65); font-family: Roboto, &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 14px; white-space: normal; background-color: rgb(255, 255, 255);">其它常见 iPhone 型号的判断：</p><pre class="ipsCode prettyprint lang-css prettyprinted" style="padding: 2px; background-color: rgb(250, 250, 250); box-sizing: border-box; font-family: monospace, monospace; font-size: 14px; overflow: auto; clear: both; direction: ltr; word-wrap: normal; border: 1px solid rgb(136, 136, 136); color: rgb(53, 60, 65);">/*&nbsp;iphone&nbsp;6,&nbsp;6s&nbsp;*/@media&nbsp;only&nbsp;screen&nbsp;and&nbsp;(min-device-width:&nbsp;375px)&nbsp;and&nbsp;(max-device-height:&nbsp;667px)&nbsp;and&nbsp;(-webkit-device-pixel-ratio:&nbsp;2)&nbsp;{
  }/ iphone 7, 8 /@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { 
  }/ iphone 6+, 6s+, 7+, 8+ /@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}

<br/>

如果要匹配竖屏，还应加上

 and (orientation : portrait)

如果要匹配横屏，应加上：

   and (orientation : landscape)

相关链接

http://stephen.io/mediaqueries/iphonex/

https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

https://www.paintcodeapp.com/news/iphone-x-screen-demystified

<br/>