查看其它板块

手机网站建设中iPhoneX兼容性问题解决方案

来源：网站建设观点 - 远策科技 | 2019-06-05

在全面屏的 iPhone X 上，不需要而外的代码，Safari 可以很好的展示现有的网站。整个网站的内容都会自动地展示在一个“安全区域”内，并不会被四周的圆角或者“小刘海”遮挡住。

Safari 使用页面的背景色（一般就是 <body> 或者 <html> 元素的 background-color）来填充周围空出的区域，与页面的其他部分保持协调。这种方式可以解决网站大部分的问题。

不过还有一些网站——尤其是那些有横向贯穿的导航条的网站，像下面这样的就需要做一点额外的工作，使得在这种新的显示下继续利用全面屏的优势，且不显得突兀。

我们需要有选择地给那些包含重要信息的元素加上内边距，避免它们受到屏幕形状的影响。这样不但可以充分利用 iPhone X 扩大的屏幕，也可以避免手机四个角、小刘海和退到主屏标志的影响。iOS 11 的 WebKit 引入了一个新的 CSS 函数—— env()，还有四个预定义的环境变量。—— safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, 和 safe-area-inset-bottom。结合这两个新东西，就可以在样式中使用安全边距。

苹果浏览器网页兼容性

在不支持 env() 函数的浏览器中，这条 CSS 规则会被忽略。因此，针对每个使用 env() 的地方，加一条 CSS 备用规则尤其重要。我们可以使用 Safari Technology Preview 新增的 CSS 函数 min() 或 max() 来实现。这两个函数都接受任意个数字，返回其中最小或者最大值。两个函数都可以使用在 calc() 中，也可以互相嵌套，也允许在函数内使用计算（就如 calc() 的那样）。

手机处于竖屏状态时， env(safe-area-inset-left) 取值为 0px，因此 max()函数的取值为 12px。横屏时， env(safe-area-inset-left) 因为小刘海的存在，会比较大，max() 就会返回安全边距，这样就可以保证重要的内容总是可见。

返回首页了解更多网站建设观点

远策科技

河北远策科技有限公司以工匠精神打造精致服务，不循规蹈矩，不惊世骇俗，为企业互联网营销整合方案，服务涵盖：网站建设、网站推广、品牌优化、微信开发、VI设计、视频制作等。解决企业互联网营销难题，让企业不再为推广而烦恼。

远见卓识

10年网站建设推广经验

18家优秀合作设计机构

117家品牌长期合作共赢

1000+网站建设案例作品

专注营销型网站建设定制

深厚经验网站建设团队

完备的项目流程管理体系

企业一站式网络推广服务

策无遗算

一路走来，崇尚创意是我们的活力和根源，让客户满意是我们工作的目标，不断超越客户的期望值源自我们对这个行业的热爱！远策科技结合十年互联网品牌设计经验和整合营销的理念，将策略和执行紧密结合，有效提升企业推广整体表现！

建站公司地址：石家庄市长安嘉和广场1911、裕华区ICC环球智慧中心24F | 业务咨询：131-1155-0088 , 159-3167-7513

河北远策网络公司为您提供石家庄网站建设制作,网站优化推广,网站改版托管等 | 冀ICP备18035311号-1 | SITEMAP | 冀公网安备:13010202002454号

首页

网站建设

营销推广

微信开发

资讯

案例

联系

探知 • 创造美好

查看其它板块

手机网站建设中iPhoneX兼容性问题解决方案

快捷标签

多一份参考，总有益处

远策科技

远见卓识

策无遗算

相关链接展开

远策 - 建站推广一站式服务

131-1155-0088

首页

网站建设

营销推广

微信开发

资讯

案例

联系

关于

Yuan Ce

探知 • 创造美好

查看其它板块

手机网站建设中iPhoneX兼容性问题解决方案

快捷标签

多一份参考，总有益处

远策科技

远见卓识

策无遗算

相关链接 展开

远策 - 建站推广一站式服务

131-1155-0088

微信扫码 立即咨询

相关链接展开

微信扫码立即咨询