第一时间:网页开发者如何为iPhone X进行样式优化

由于iPhone X手机上方有一个集成各种传感器的“刘海”，网页设计行者和开发者都为此深深忧虑。幸好，苹果公司开发人员注意到了这一点。

今天（北京时间2017年9月23日），Safari 网页浏览器引擎 WebKit 的团队在博客上详细讲述了设计师应该如何为 iPhone X 优化自己的网站。iPhone X 顶部有“刘海”，这里包含了很多传感器。对于网页设计人员和开发人员来说，这意味着新的挑战。

苹果尝试将网页内容移动至没有“刘海”的那一测解决这个问题。不过对于全屏设计的网页来说，这个解决方案可能并不够好。文档中提到了在网页的 meta 中使用 viewport-fit=cover，这样的话网页不会拉伸至整个屏幕，让显示屏看起来很怪。

当 viewport 调整之后，下一步就是要利用 iPhone X 安全区域进行网页设计。在安全区域下，网页内容不会受到刘海、底部 Home 指示器以及圆角的影响。对于设计师来说，iPhone X 这样的设计比较尴尬，因为刚刚移除了边框，又加入了无形的边框，让整体屏幕受到了影响，点此可以看这个官方的完整网页设计指引：https://webkit.org/blog/7929/designing-websites-for-iphone-x/