Jump to content
IPS Community Suite 简体中文
Sign in to follow this  
ipscn

iPhone X Responsive Design

Recommended Posts

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

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×