主题 : Safari团队公布苹果iPhone X浏览网页效果图:强迫症崩溃
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61687(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

Safari团队公布苹果iPhone X浏览网页效果图:强迫症崩溃

9月23日消息北京时间9月13日凌晨,苹果正式发布了iPhone的十周年纪念产品iPhone X,苹果将其称作“智能手机的未来”。iPhone X采用5.8英寸OLED异形全面屏,由于要增加Face ID和前置摄像头等模块,其正面顶部采用了“刘海”的设计。
iPhone X一经发布,关于这段“刘海”的讨论就没有停止过。而更重要的是,这样的设计让大部分的应用程序都有点水土不服。苹果此前已经向开发者公布了UI适配的注意事项,强调不能隐藏设备屏幕的圆角部分,同时也不许在顶部设置黑色栏隐藏传感器遮蔽区域。

对于跟小编一样的“强迫症”来说,看到这样的画面,真的有点抓狂……
不过日前Safari网页浏览器引擎WebKit的团队在博客上详细介绍了iPhone X的网页优化方法。简单来说,就是将网页内容移动到没有“刘海”的那一侧,屏幕顶部“刘海”两侧的区域不显示网页内容。
文档中提到了在网页的meta中使用viewport-fit=cover,这样的话网页不会拉伸至整个屏幕,让显示屏看起来很怪。

调整完viewport之后,就可以利用iPhone X安全区域进行网页设计。在安全区域内,网页内容不会受到刘海、圆角等问题的影响。

不过对于设计师来说,还是有点尴尬,好不容易实现的全面屏,这样一来又相当于加上了无形的边框,让用户的视觉体验大打折扣。

▲最终优化版
虽然优化后的最终版本视觉效果要好上不少,但是依然有点崩溃……
竖屏对比效果:

▲优化前



▲最终优化效果
详细设计指导>>传送门
级别: 八片秋叶

UID: 77327
精华: 0
发帖: 7643
威望: 56353 点
无痕币: 109 WHB
贡献值: 0 点
在线时间: 2886(时)
注册时间: 2009-01-12
最后登录: 2024-03-13

迷人的小刘海
多一个朋友多条路,多一个冤家多堵墙!
级别: 八片秋叶

UID: 21112
精华: 0
发帖: 17573
威望: 53400 点
无痕币: 4033 WHB
贡献值: 0 点
在线时间: 2390(时)
注册时间: 2008-06-24
最后登录: 2023-11-20

就是有点眼晕
千山同一月 万户尽皆春 千江有水千江月 万里无云万里天
级别: 总版主

UID: 998
精华: 0
发帖: 604963
威望: 528524 点
无痕币: 3089 WHB
贡献值: 0 点
在线时间: 61687(时)
注册时间: 2008-12-25
最后登录: 2024-03-29

这个可以看看,了解一下。
Total 0.047464(s) query 4, Time now is:03-29 17:03, Gzip enabled 粤ICP备07514325号-1
Powered by PHPWind v7.3.2 Certificate Code © 2003-13 秋无痕论坛