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

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

当 viewport 调整之后，下一步就是要利用 iPhone X 安全区域进行网页设计。在安全区域下，网页内容不会受到刘海、底部 Home 指示器以及圆角的影响。对于设计师来说，iPhone X 这样的设计比较尴尬，因为刚刚移除了边框，又加入了无形的边框，让整体屏幕受到了影响。点击这里查看设计指导。