今天，iPhone X正式发售。接下来是一条新的白线，它快乐地坐在底部触摸板上，取代了原来的主页按钮。这也唤起了一个怀旧的物理家庭钥匙复合体。

顶部的黑色凹槽采用了许多最先进的技术：红外摄像机，环境传感器，光传感器等。——所有这些都用于支持面部识别。

　iPhone X 的顶部凹槽

这也意味着从观看视频到玩游戏，你总会在价值1000美元的手机上看到黑色凹槽 - 但随着时间的推移，这可能会令人赏心悦目。为了适应这种情况，Apple在硬件，软件和iOS交互方面做了很多改变，而Safari的网站就是其中之一。

　在iPhone X上的网页呈现

　　横屏

在横向模式下，iPhone X会显示带有白色条纹的网页。尽管许多部件具有不同的颜色背景，但Apple的官方网站也由这些白线代表。

让您的网页更加与众不同的唯一方法是为您的移动网页设置合适的背景颜色——一种颜色，确保大多数配色方案与您的品牌/网站一致。

身体{

背景颜色: 676767;

}

但是，在同一页面上具有不同背景颜色，渐变或图案的部分仍将在两侧显示所选的正文背景颜色。

　竖屏

当手机处于纵向（这也是人们最常用的方式）时，当窗口穿过所有边缘时，两侧都没有白线。

在纵向模式下，iPhone X将穿透整个屏幕。它被浸入使得窗户可以无缝地穿过四边的圆角。

此外，状态和URL /导航栏会占用页面的自定义背景颜色。

这类似于Android上的Chrome，它提供了主题颜色的元标记，占据了整个状态栏中页面的主要颜色。

垂直方向开辟了品牌色彩发展的新世界，进一步缩小了渐进式网络应用与原生应用之间的差距。另一方面，Safari上的水平屏幕渲染有点与垂直相关。随着时间的推移，看到它如何演变也很有趣。

iPhone X的最佳页面——https://thepeachstudio.com/iphone-x

围绕新设计指南Groove Design，Apple强调iOS开发人员不会隐藏设备的圆角或在应用程序凹槽周围添加黑色块。

原作者：Krishna Murari

原始链接：https://medium.com/peachstudio/designing-responsive-webpages-for-the-iphone-x-c3fc55732409

« Apple即将进入新总部：回顾Apple Park的过去和现在 | 复杂：借用区块链我0预算3天球迷增长3次 »