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

Web前端来源:ZOL203.8K阅读模式

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

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

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

令人崩溃的UI设计

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

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

刘海遮住了网页内容

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

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

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

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

 

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

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

本站文章大部分始于原创,用于个人学习记录,可能对您有所帮助,仅供参考!

weinxin
我的微信
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
 
知更鸟
评论  20  访客  20
    • BanYuner
      BanYuner 5

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

      • 励志语录
        励志语录 6

        看起来挺好看的

        • 中国历史故事
          中国历史故事 3

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

          • 我爱动感单车网
            我爱动感单车网 7

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

            • 绝世坏蛋
              绝世坏蛋 1

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

              • 金选网赚博客
                金选网赚博客 1

                看起来还不错啊

                • 重庆SEO公司
                  重庆SEO公司 2

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

                  • 洛苑博客
                    洛苑博客 3

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

                    • 优选汇
                      优选汇 2

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

                      • 会值得网
                        会值得网 1

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

                        • 强子
                          强子 0

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

                          • 何先生
                            何先生 1

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

                            • 趣果网
                              趣果网 3

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

                              • 悠悠
                                悠悠 1

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

                                • 后宫学长
                                  后宫学长 0

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

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

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

                                    • 梁兴健
                                      梁兴健 2

                                      这摄像头有点突出来

                                      • 拿着灼热的铁
                                        拿着灼热的铁 2

                                        iPhone X的齐刘海真的是一个很蹩脚的设计,以后早晚会淘汰。

                                        • 亚克力浴缸
                                          亚克力浴缸 2

                                          这个界面挺好简洁的,但是苹果就是贵,用不起

                                          • 代码如诗如画
                                            代码如诗如画 1

                                            刘海屏是最差的手机设计哈哈

                                          匿名

                                          发表评论

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

                                          拖动滑块以完成验证