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