前端iPhone X适配总结

Zoom 发布于2019-08-30 14:10 / 1305人阅读

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。

屏幕尺寸

垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。

安全区域

安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator）影响

viewport-fit

通过对meta标签viewport的扩展，可以调整页面的展现区域。viewport-fit有三个可选值：

contain:使页面展示在安全区域内。
cover： 使页面占满屏幕。
auto： 和 contain 选项表现一样

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

env() 和 constant()

因为之前使用的constant已经被弃用，所以需要我们向后兼容：

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

适配 1.设置网页在可视窗口的布局方式使页面完全覆盖整个窗口

 
 只有设置了 viewport-fit=cover，才能使用 env()。

2. 页面主体内容限定在安全区域内

body {
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

3. fixed 元素的适配

如果元素是fixed定位且bottom=0，那么除了设置body的padding-bottom还不够，还需要给它自身添加padding，因为它是相对于屏幕最底部定位的。

{
     padding-bottom: constant(safe-area-inset-bottom);
     padding-bottom: env(safe-area-inset-bottom);
   }

或者通过计算函数 calc 覆盖原来高度：

{
        height: calc(60px(假设值) + constant(safe-area-inset-bottom));
        height: calc(60px(假设值) + env(safe-area-inset-bottom));
   }

注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。
如果元素是fixed定位且bottom不等于0，则只调整位置就可以了，增加margin-bottom或者改变bottom。

参考

网页适配 iPhoneX，就是这么简单

Designing Websites for iPhone X

Human Interface Guidelines

混合云私有云新特性总结选择器总结许可email营销总结适配问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115822.html

前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

JackJiang 2019-08-22 15:32 评论0 收藏0
前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

LiuRhoRamen 2019-08-01 18:42 评论0 收藏0
前端iPhone X适配总结

摘要：页面主体内容限定在安全区域内元素的适配如果元素是定位且，那么除了设置的还不够，还需要给它自身添加，因为它是相对于屏幕最底部定位的。屏幕尺寸垂直方向上，iPhone X的显示宽度与iPhone 6，iPhone 7 和 iPhone 8 的 4.7 英寸一样，但是比4.7英寸的显示屏高145pt。安全区域安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）...

sushi 2019-08-05 18:04 评论0 收藏0
移动端布局与适配

摘要：实战之微信钱包腾讯服务界面网格布局是让开发人员设计一个网格并将内容放在这些网格内。对于移动端适配，不同的公司不同的团队有不同的解决方案。栅格系统用于处理页面多终端适配的问题。 grid实战之微信钱包腾讯服务界面 CSS3网格布局是让开发人员设计一个网格并将内容放在这些网格内。而不是使用浮动制作一个网格，实际上是你将一个元素声明为一个网格容器，并把元素内容置于网格中。移动端页面适配—...

Clect 2019-08-29 14:08 评论0 收藏0
前端开发中像素的概念

摘要：前端开发中像素的概念最近在公司实习第一次正式接触到设计师的设计稿我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。前端开发中像素的概念最近在公司实习,第一次正式接触到设计师的设计稿.我相信很多刚涉及移动端设计与开发的同学基本上会在前端开发中的像素问题上纠结很久，所以写下这篇笔记，便于自己日后翻阅。如果有啥理解上的错误...

darcrand 2019-08-29 12:24 评论0 收藏0