移动端适配iPhoneX方案

大象无痕

发布于 2018-07-17 15:41:37

1.3K0

文章被收录于专栏：前端之路前端之路

对页面进行iPhoneX适配处理教程

在viewport 中添加 viewport-fit=cover 属性 <meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover">
安全区设置 iOS 11中包含了一个新的CSS函数 env()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom123body { padding-bottom: env(safe-area-inset-bottom); }

一般我们只希望 iPhoneX 适配样式，可以配合 @supports 进行css条件判断使用样式：

12345	@supports (bottom: constant(safe-area-inset-bottom)) { div { margin-bottom: constant(safe-area-inset-bottom); } }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2017-06-07，如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

登录后参与评论

0 条评论

热度

移动端适配iPhoneX方案