Safari团队公布iPhoneX浏览网页效果图

  • A+
所属分类:Web前端

iPhoneX异型屏上的齐刘海设计,可能会让开发者崩溃,因此苹果向开发者公布了UI适配的注意事项,强调了不能隐藏设备屏幕的圆角部分,同时也不允许设计顶部黑色状态栏来隐藏刘海。

Safari团队公布iPhoneX浏览网页效果图

所以这项政策给开发者带来了巨大的麻烦。好在日前Safari浏览器的引擎WebKit团队为我们详细介绍了该如何为 iPhoneX 优化UI设计。

令人崩溃的UI设计

WebKit团队以Safari为例,简单的说就是将网页内容移动到设备中间没有刘海的区域,但在有刘海的区域同样不能空白。就像上面这样,但也不能被刘海遮住,就像下面这样。

Safari团队公布iPhoneX浏览网页效果图

Safari团队公布iPhoneX浏览网页效果图刘海遮住了网页内容

利用viewport调整安全区域,就可以利用 iPhoneX 在安全区域内进行网页设计了,而在这个安全区域内,网页上的内容不会被刘海,圆角遮住。

Safari团队公布iPhoneX浏览网页效果图安全区域

在安全区域内设计完后,要将两侧的空白区域填充上相适配的颜色,最终效果就是这样。

Safari团队公布iPhoneX浏览网页效果图横屏最终效果

 

Safari团队公布iPhoneX浏览网页效果图竖屏最终效果

最终的效果看起来就好很多,但这只是网页部分的设计,还有更多的APP等着开发者重新设计,相信在11月份苹果 iPhoneX 上市以后,就已经有不少APP都做好了适配。

weinxin
我的微信
分享交流WordPress经验与技巧,关注前端设计与网站制作。仅用于功能演示。
Begin主题购买
Begin主题购买

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:19   其中:访客  19   博主  0

    • avatar 上海除尘通风系统 2

      谢谢分享

      • avatar BanYuner 5

        这个设计已经坑爹了,但是没有办法,想要用苹果的手机就只能屈服于他

        • avatar 励志语录 6

          看起来挺好看的

          • avatar 中国历史故事 3

            就像苹果的logo一样同样被啃掉一块,除此之外貌似这才是全屏的设计

            • avatar 我爱动感单车网 7

              用不起苹果,继续支持国产品牌。

              • avatar 绝世坏蛋 1

                这个设计本身就很反人类了,还不允许用黑色来填充刘海两次空白?

                • avatar 金选网赚博客 1

                  看起来还不错啊

                  • avatar 重庆SEO公司 2

                    太贵啦,估计苹果9才是一个真正改革的时代。

                    • avatar 洛苑博客 3

                      支持大神更新,反正我扒的大神的主题用到帝国cms上了,非商用

                      • avatar 优选汇 2

                        用不起苹果,继续支持国产品牌。

                        • avatar 会值得网 1

                          这个大的黑额头太难看了 :arrow: :arrow: :arrow: :arrow:

                          • avatar 强子 1

                            鸟哥,我刚更新了Mac最新系统macOS High Sierra,跟着Safari也更新到11.0(13604.1.38.1.6)了,结果发现2个问题:1、访问鸟哥博客首页 无法乡下滚动浏览第二屏以下的页面,2、微信客户端直接打开的微信公众号网页版在Safari打开也是空白,很奇怪不知道什么原因,后悔手痒升级了。

                            • avatar 何先生 1

                              用这手机玩游戏不知道是什么样的体验 :!:

                              • avatar 趣果网 3

                                iphone手机大部分都是在郑州富士康组装生成的。

                                • avatar 悠悠 0

                                  感觉挺不错的,使用windows10习惯了,表示还能接受!

                                  • avatar 232423 0

                                    重新注册行政村

                                    • avatar 后宫学长 0

                                      还要网页适配手机?
                                      这肯定是手机浏览器要做的事。

                                      • avatar 淘宝天猫优惠券大全 3

                                        确实感觉不爽,而且这手机也太小了点,还是喜欢6寸屏幕的大手机