网页开发者注意了，你需要这样为iPhone X优化_最新动态

您所在的位置：程序员俱乐部 > 新闻资讯 > 最新动态 > 网页开发者注意了，你需要这样为iPhone X优化

网页开发者注意了，你需要这样为iPhone X优化

2017/9/23 11:38:33 程序员俱乐部我要评论(0)

摘要：今天，Safari网页浏览器引擎WebKit的团队在博客上详细讲述了设计师应该如何为iPhoneX优化自己的网站。iPhoneX顶部有“刘海”，这里包含了很多传感器。对于网页设计人员和开发人员来说，这意味着新的挑战。苹果尝试将网页内容移动至没有“刘海”的那一测解决这个问题。不过对于全屏设计的网页来说，这个解决方案可能并不够好。文档中提到了在网页的meta中使用viewport-fit=cover，这样的话网页不会拉伸至整个屏幕，让显示屏看起来很怪
标签：iphone 为你需要开发开发者网页优化

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

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

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

上一篇： ThinkPad 25周年纪念版高清渲染图曝光下一篇：微软AI研发团队员工已超过8000多人