Safari团队公布苹果iPhone X浏览网页效果图
2017-10-12 10:50:02
IT资讯
北京时间9月13日凌晨，苹果正式发布了iPhone的十周年纪念产品iPhone X，苹果将其称作“智能手机的未来”。iPhone X采用5.8英寸OLED异形全面屏，由于要增加Face ID和前置摄像头等模块，其正面顶部采用了“刘海”的设计。
iPhone X一经发布，关于这段“刘海”的讨论就没有停止过。而更重要的是，这样的设计让大部分的应用程序都有点水土不服。苹果此前已经向开发者公布了UI适配的注意事项，强调不能隐藏设备屏幕的圆角部分，同时也不许在顶部设置黑色栏隐藏传感器遮蔽区域。
iPhone X一经发布，关于这段“刘海”的讨论就没有停止过。而更重要的是，这样的设计让大部分的应用程序都有点水土不服。苹果此前已经向开发者公布了UI适配的注意事项，强调不能隐藏设备屏幕的圆角部分，同时也不许在顶部设置黑色栏隐藏传感器遮蔽区域。
对于跟小编一样的“强迫症”来说，看到这样的画面，真的有点抓狂……
不过日前Safari网页浏览器引擎WebKit的团队在博客上详细介绍了iPhone X的网页优化方法。简单来说，就是将网页内容移动到没有“刘海”的那一侧，屏幕顶部“刘海”两侧的区域不显示网页内容。
文档中提到了在网页的meta中使用viewport-fit=cover，这样的话网页不会拉伸至整个屏幕，让显示屏看起来很怪。
调整完viewport之后，就可以利用iPhone X安全区域进行网页设计。在安全区域内，网页内容不会受到刘海、圆角等问题的影响。
不过对于设计师来说，还是有点尴尬，好不容易实现的全面屏，这样一来又相当于加上了无形的边框，让用户的视觉体验大打折扣。
▲最终优化版
虽然优化后的最终版本视觉效果要好上不少，但是依然有点崩溃……
竖屏对比效果：
▲优化前
▲最终优化效果
相关文章
-
![]()
iPhone默认浏览器终于可以修改！不再拘泥于 Safari苹果教程2020-09-13 -
![]()
微软宣布延迟MCSD、MCSA和MCSE认证的淘汰时间IT资讯2020-04-02 -
![]()
iphone11手机激活imessage的图文教程苹果教程2020-02-27 -
![]()
重磅！拍照应用David's Disposable达成App Store百万下载量软件资讯2020-01-21 -
![]()
消息称，诺基亚将提供全球首个用于铁路运营的SA 5G系统IT资讯2019-12-15 -
![]()
共建SaaS生态！加推加入腾讯“千帆计划”IT资讯2019-10-31
相关专题
-
![]()
Picasa怎么样|功能强大的Picasa版本大全2020-11-02
继续阅读
-
![]()
纸巾盒系列桃子移植的安卓手游排行榜游戏攻略2023-10-04 -
![]()
王小屋的屋屋保卫战兑换码汇总-2023有效兑换码大全游戏攻略2023-10-04 -
![]()
金铲铲之战S9.5六艾欧尼亚霞阵容怎么玩-S9.5六艾欧尼亚霞阵容推荐游戏攻略2023-10-04 -
![]()
魔兽世界宣罪者声望怎么刷-宣罪者声望刷取攻略游戏攻略2023-10-03 -
![]()
好玩的烹饪做饭类游戏有哪些游戏攻略2023-10-03
