iPhone X 响应web适配

Update time: 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)

 

相关链接

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

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

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


请在下方留下您的评论

icon_question.gificon_razz.gificon_sad.gificon_evil.gificon_exclaim.gificon_smile.gificon_redface.gificon_biggrin.gificon_surprised.gificon_eek.gificon_confused.gificon_cool.gificon_lol.gificon_mad.gificon_twisted.gificon_rolleyes.gificon_wink.gificon_idea.gificon_arrow.gificon_neutral.gificon_cry.gificon_mrgreen.gif