网页页面兼容iPhoneX,便是这么简易

2021-02-26 12:07 jianzhan

网页页面兼容iPhoneX,便是这么简易


短视頻,自新闻媒体,达人种草1站服务

iPhoneX 撤销了物理学功能键,改为底部小黑条,这1修改致使网页页面出現了较为难堪的显示屏兼容难题。针对网页页面而言,顶部(刘海位置)的兼容难题访问器早已做了解决,因此大家只必须关心底部与小黑条的兼容难题便可(即普遍的吸底导航栏、回到顶部等各种各样相对性底部 fixed 精准定位的元素)。

作者:佚名来源于:Aotu.io|2017⑴1⑵8 15:29 挪动端 个人收藏 共享CTO训炼营 | 12月3⑸日,深圳市,是情况下变成出色的技术性管理方法者了

iPhoneX 撤销了物理学功能键,改为底部小黑条,这1修改致使网页页面出現了较为难堪的显示屏兼容难题。针对网页页面而言,顶部(刘海位置)的兼容难题访问器早已做了解决,因此大家只必须关心底部与小黑条的兼容难题便可(即普遍的吸底导航栏、回到顶部等各种各样相对性底部 fixed 精准定位的元素)。

笔者根据查阅了1些官方文本文档,和融合具体新项目中的1些解决工作经验,梳理了1套简易的兼容计划方案共享给大伙儿,期待对大伙儿有一定的协助,下列是解决前后左右实际效果图:

 

兼容以前必须掌握的几个新专业知识

安全性地区

安全性地区指的是1个可视性对话框范畴,处在安全性地区的內容不会受到圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)危害,以下图蓝色地区:

 

也便是说,大家要做好兼容,务必确保网页页面可视性、可实际操作地区是在安全性地区内。

更详尽表明,参照文本文档: Human Interface Guidelines - iPhoneX

viewport-fit

iOS11 新增特点,iPhone企业以便兼容 iPhoneX 对现有 viewport meta 标识的1个拓展,用于设定网页页面在可视性对话框的合理布局方法,可设定3个值:

contain: 可视性对话框彻底包括网页页面內容(左图)

cover:网页页面內容彻底遮盖可视性对话框(右图)

auto:默认设置值,跟 contain 主要表现1致

 

留意:网页页面默认设置不加上拓展的主要表现是 viewport-fit=contain,必须兼容 iPhoneX 务必设定 viewport-fit=cover,这是兼容的重要流程。

更详尽表明,参照文本文档: viewport-fit-descriptor

constant 涵数

iOS11 新增特点,Webkit 的1个 CSS 涵数,用于设置安全性地区与界限的间距,有4个预订义的自变量:

safe-area-inset-left:安全性地区间距左侧界限间距

safe-area-inset-right:安全性地区间距右侧界限间距

safe-area-inset-top:安全性地区间距顶部界限间距

safe-area-inset-bottom:安全性地区间距底部界限间距

这里大家只必须关心 safe-area-inset-bottom 这个自变量,由于它对应的便是小黑条的高宽比(横纵屏正值不1样)。

留意:当 viewport-fit=contain 时 constant 涵数是不起功效的,务必要相互配合 viewport-fit=cover 应用。针对不适用 constant 的访问器,访问器可能忽视它。

官方文本文档中提到 env 涵数将要要更换 constant 涵数,笔者检测过临时还不能用。

更详尽表明,参照文本文档: Designing Websites for iPhone X

怎样兼容

掌握了以上所说的几个专业知识点,接下来大家兼容的思路就很清楚了。

第1步:设定网页页面在可视性对话框的合理布局方法

新增 viweport-fit 特性,使得网页页面內容彻底遮盖全部对话框:

metaname="viewport"content="width=device-width, viewport-fit=cover"

前面也是有提到过,仅有设定了 viewport-fit=cover,才可以应用 constant 涵数。

第2步:网页页面行为主体內容限制在安全性地区内

这1步依据具体网页页面情景挑选,假如不设定这个值,将会存在小黑条遮挡网页页面最底部內容的状况。

body {

padding-bottom: constant(safe-area-inset-bottom);

}

第3步:fixed 元素的兼容

种类1:fixed 彻底吸底元素(bottom = 0),例如下图这两种状况:

 

能够根据加内边距 padding 拓展高宽比:

{

padding-bottom: constant(safe-area-inset-bottom);

}

或根据测算涵数 calc 遮盖原先高宽比:

{

height: calc(60px(假定值) + constant(safe-area-inset-bottom));

}

留意,这个计划方案必须吸底条务必是有情况色的,由于拓展的一部分情况是追随外器皿的,不然出現镂空状况。

也有1种计划方案便是,能够根据新增1个新的元素(空的色调块,关键用于小黑条高宽比的占位),随后吸底元素能够不更改高宽比只必须调剂部位,像这样:

{

margin-bottom: constant(safe-area-inset-bottom);

}

空的色调块:

{

position: fixed;

bottom: 0;

width: 100%;

height: constant(safe-area-inset-bottom);

background-color: #fff;

}

种类2:fixed 非彻底吸底元素(bottom 0),例如 回到顶部 、 侧面广告宣传 等

像这类只是部位必须对应向上调剂,能够仅根据外边距 margin 来解决:

{

margin-bottom: constant(safe-area-inset-bottom);

}

或,你还可以根据测算涵数 calc 遮盖原先 bottom 值:

{

bottom: calc(50px(假定值) + constant(safe-area-inset-bottom));

}

别忘了应用 @supports

写到这里,大家普遍的两类型型的 fixed 元素兼容计划方案早已掌握了吧,但别忘了,1般大家只期待 iPhoneX 才必须新增兼容款式,大家能够相互配合 @supports 这样撰写款式:

@supports (bottom: constant(safe-area-inset-bottom)) {

div {

margin-bottom: constant(safe-area-inset-bottom);

}

}