iPhoneX全面屏非常有科技感，但是由于圆角、摄像头刘海位置以及控制黑条的存在，我们需要对它的风格做一些调整。没有X的同学可以打开Xcode9的iPhoneXSimulator进行学习调试。设计尺寸相关IPone型号屏幕尺寸屏幕密度展开尺寸像素密度倍数图4系列3.5英寸326ppi320*480pt640*960px@2X5系列4英寸326ppi320*568pt640*1136px@2X6/6s/7/84.7英寸326ppi375*667pt750*1334px@2X6p/6sp/7p/8p5.5inches401ppi414*736pt1242*2208px@3XX5.8inches458ppi375*812pt1125*2436px@3X从设计的角度，根据显影尺寸，我们用IPoneX和比较经典的4.7-英寸屏幕。在竖屏模式下，不难发现X比它多了145pt，那么145pt的距离应该怎么分配呢？添加44到顶部导航栏（用于“刘海”）和底部底部栏34（用于“黑条主页按钮”）中间的安全区域（用于“内容区域”）安全区域][2]][1]什么是safetyArea，简单的说就是我们在这个区域设置一些交互按钮或者链接是不会受到影响的。下图底部的按钮会受到一定影响，图片可以随意截取，请不要在意：viewport-fit喜人，IOS11为我们提供了一个新特性viewport-fit值说明自动/包含页面默认嵌入封面填充屏幕默认情况下viewport-fit是自动的。我们可以看看在同一个页面不设置viewport-fit和设置为cover的两种表现：没有设置:设置为cover:当然在横屏的情况下，设置cover可以看得更清楚可以让我们的页面导航和标签更符合设计，但是我们内部应该怎么布局呢？我是直接使用填充还是有其他方法？通过CSSconstant()函数，我们可以计算布局的padding值，解决文本被埋在传感器底部的问题。但是IOS11为我们提供了一种更简单的方法。新的CSS函数constant()已添加到WebKit，以及一组四个定义的常量：safe-area-inset-left、safe-area-inset-right、safe-area-inset-top、safe-area-插图底部。这四个常量分别代表了各个方向的非安全区域的值：我们试着给刚才被传感器覆盖的页面添加一些css：.con{padding:12px;padding-left:constant(safe-area-inset-left);padding-right:constant(safe-area-inset-right);}是的。完美的效果。缺陷问题但是如果我们现在把手机改成竖屏的话，会有一些小瑕疵，因为我们把padding-left和padding-right设置为安全区域之外的常量，所以当我们竖屏的时候，vertical如果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
