IPhoneX网页布局简介

IPhoneX全面屏是十分科技化的，可是因为其圆角和摄像头刘海位置以及操控黑条的存在使得咱们须要去对其样式作一些适配，没有X的同窗能够开启 Xcode 9 的iPhone X 模拟器做为学习和调试。

设计和尺寸相关

IPone型号	屏幕尺寸	屏幕密度	开发尺寸	像素密度	倍图
4系列	3.5英寸	326ppi	320*480pt	640*960px	@2X
5系列	4英寸	326ppi	320*568pt	640*1136px	@2X
6/6s/7/8	4.7英寸	326ppi	375*667pt	750*1334px	@2X
6p/6sp/7p/8p	5.5英寸	401ppi	414*736pt	1242*2208px	@3X
X	5.8英寸	458ppi	375*812pt	1125*2436px	@3X

在设计的角度上，根据开发尺寸咱们用IPoneX和比较经典的4.7英寸屏幕进行对比。竖屏模式下不难发现X比其多了145pt，那么咱们应该怎么分配这145的距离呢。

1. 顶部 Navigation Bar增长44（for“刘海”）
2. 底部 Bottom Bar增长34（for“黑条Home按钮”）
3. 中间的 Safe Area 区域（for“内容区域”）

安全区域

][2]][1]

何为安全区域，简单来说就是咱们在此区域内设置一些交互的按钮或者连接不会被影响。下图的话底部按钮就会受到一些影响，图片随意截取，请勿在乎：

viewport-fit

可喜可贺，IOS11给咱们提供了一个新特性 viewport-fit

值	说明
auto/contain	页面默认内嵌
cover	页面充满屏幕

<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