在全面屏的 iPhone X 上，不需要而外的代码，Safari 可以非常完美的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内，并不会被四周的圆角或者“小刘海”遮挡住。
本文译自 webkit.org 的 Designing Websites for iPhone X。翻译来源： 前端外刊评论，这是一篇来自苹果关于 iPhone X 适配的官方指南，希望可以帮助各位前端开发者做好 iPhone X 的适配。
全屏显示
<metaname='viewport'content='initial-scale=1, viewport-fit=cover’>
安全边距
.post {
padding: 12px;
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
借力 min() 或者 max() 横竖屏兼容
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
问题反馈
服务热线 19970861797
