首页 > 苹果

iPhone X网页浏览效果公布:强迫症崩溃

admin 苹果 2021-03-07 10:36:00 iphonex   iphone x浏览网页   safari

  苹果发布的iPhone的十周年纪念产品iPhone X,苹果称其“智能手机的未来”。这也是苹果首款全面屏手机,不过这个全面屏手机有一个尴尬的齐刘海设计,虽然里面的功能很强大,但是这个齐刘海对于屏幕的使用来说相当尴尬。

  iPhone X一经发布,关于这段“刘海”的讨论就没有停止过。而更重要的是,这样的设计让大部分的应用程序都有点水土不服。苹果此前已经向开发者公布了UI适配的注意事项,强调不能隐藏设备屏幕的圆角部分,同时也不许在顶部设置黑色栏隐藏传感器遮蔽区域。

iPhone X网页浏览效果公布:强迫症崩溃

  对于跟小编一样的“强迫症”来说,看到这样的画面,真的有点抓狂……

  不过日前Safari网页浏览器引擎WebKit的团队在博客上详细介绍了iPhone X的网页优化方法。简单来说,就是将网页内容移动到没有“刘海”的那一侧,屏幕顶部“刘海”两侧的区域不显示网页内容。

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

iPhone X网页浏览效果公布:强迫症崩溃

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

iPhone X网页浏览效果公布:强迫症崩溃

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

iPhone X网页浏览效果公布:强迫症崩溃

▲最终优化版

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

  竖屏对比效果:

iPhone X网页浏览效果公布:强迫症崩溃

▲优化前

iPhone X网页浏览效果公布:强迫症崩溃

▲最终优化效果

  虽然这样优化iPhone X的齐刘海后确实是不影响使用了,但是之后的app应用又该怎么解决呢?

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。
本文地址:/apple/2021-03-07/11320.html

留言与评论(共有 0 条评论)
   
验证码:

潘少俊衡

| 桂ICP备2023010378号-4

Powered By EmpireCMS

爱享小站

中德益农

谷姐神农

环亚肥料

使用手机软件扫描微信二维码

关注我们可获取更多热点资讯

感谢潘少俊衡友情技术支持