[聚合文章] IPhoneX网页布局

<meta name="viewport" content=" viewport-fit=cover">

viewport-fit默认情况下是 auto 我们可以看一下同一个页面不设置 viewport-fit 和设置其为 cover 的两种表现形式：

• 不设置：
  

• 设置为 cover：
  

当然，在横屏情况下我们可以更清晰地看到，设置cover可以使我们的页面导航和tag更加符合设计，但是内部的我们应该怎样进行布局呢？是直接使用 padding 还是有别的方法呢？

CSS constant()函数

我们可以通过计算其padding值来进行布局，解决文字被埋在传感器底部的问题。

但是IOS11给我们提供了更简单的办法。WebKit 中新增了一个 CSS 函数 constant()，以及一组 四个已经定义好的常量： safe-area-inset-left, safe-area-inset-right, safe-area-inset-top, safe-area-inset-bottom。这四个常量分别代表了每个方向的非安全区域的值：

那我们试着现在给刚刚的被传感器覆盖的页面增加一些css：

.con {    padding: 12px;    padding-left: constant(safe-area-inset-left);    padding-right: constant(safe-area-inset-right);}

是的。完美的效果。

瑕疵问题

但是如果现在我们现在把手机换成竖屏的话，会出现一些小瑕疵，因为我们设置的是 padding-left 和 padding-right 为安全区域外的变局的常量，所以当我们竖过来后，竖屏模式的 safe-area-inset-left 和 safe-area-inset-right 为0，那么文字还是会贴边的。

新的CSS函数 min() 和 max() 可以帮我们在不通过JS的情况下简单解决这个问题。（PS：现Safari暂未支持）

@supports(padding: max(0px)) {    .con {        padding-left: max(12px, constant(safe-area-inset-left));        padding-right: max(12px, constant(safe-area-inset-right));    }}

这样的话 padding-left 会取较大的那个值。当 safe-area-inset-left 为0时候，其值会为 12px。

本文讲的一些方法对于现阶段的IPhone网页布局其实还是有一些兼容问题

• constant() 需要我们对不支持的浏览器做一些兼容回退，并且CSS工作组对这个方法使用了不同的名称
• max() 和 min() 方法现阶段还没有支持，我们还是要采用判断横竖屏的方法进行动态的设置，或者直接也抛弃 constant() 做固定的padding值。
• 在使用定位的时候如果和理想效果有偏差可以试试设置 body,html 的高度为 100%

全屏时代即将来临，未来我们应该有更多的方法进行网页布局。

本文部分图片和思想来自designing-websites-for-iphone-x

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。