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

  • 时间:
  • 浏览:0

IT之家9月23日消息 北京时间9月13日夜深 ,苹果74 4 正式发布了苹果74 4 的十周年纪念产品苹果74 4 X,苹果74 4 将其称作“智能手机的未来”。苹果74 4 X采用5.8英寸OLED异形全面屏,肯能要增加Face ID和前置摄像头等模块,其正面顶部采用了“刘海”的设计。

苹果74 4 X一经发布,关于这段“刘海”的讨论就那么停止过。而更重要的是,原来的设计让大每段的应用多多程序运行 就特别水土不服。苹果74 4 此前肯能向开发者发表声明了UI适配的注意事项,强调非要隐藏设备屏幕的圆角每段,一起就说 许在顶部设置黑色栏隐藏传感器遮蔽区域。

对于跟小编一样的“强迫症”来说,看过原来的画面,真的特别抓狂……

不过日前Safari网页浏览器引擎WebKit的团队在博客上完整篇 介绍了苹果74 4 X的网页优化最好的妙招。简单来说,就说 将网页内容移动到那么“刘海”的那一侧,屏幕顶部“刘海”两侧的区域不显示网页内容。

文档中提到了在网页的meta中使用viewport-fit=cover,原来说说网页不用拉伸至整个屏幕,让显示屏看起来很怪。

调整完viewport事先,就还时要利用苹果74 4 X安全区域进行网页设计。在安全区域内,网页内容不用受到刘海、圆角等问题报告 报告 的影响。

不过对于设计师来说,还是特别尴尬,好不容易实现的全面屏,原来一来又合适加带了无形的边框,让用户的视觉体验大打折扣。

▲最终优化版

确实优化后的最终版本视觉效果要好上不少,怎么让依然特别崩溃……

竖屏对比效果:

▲优化前

▲最终优化效果

完整篇 设计指导>>传送门