iPhone X 响应web适配

最后编辑时间: 2018-10-23

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{}}

其它常见 iPhone 型号的判断：

/* iphone 6, 6s */@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) {
  }/* 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) {}

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

 and (orientation : portrait)

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

   and (orientation : landscape)

黑海洋 - WIKI

iPhone X 响应web适配