iPhoneX浏览网页效果图公布，强迫症看了想打人
2017年09月23日 17:41:01
来源：ZOL中关村在线
原标题：iPhoneX浏览网页效果图公布，强迫症看了想打人 中关村在线消息：苹果iPhoneX将在1
原标题：iPhoneX浏览网页效果图公布，强迫症看了想打人
中关村在线消息：苹果iPhoneX将在10月27日开启预约，11月4日正式发售。我们都已经知道了iPhoneX上奇怪的刘海设计，更另开发者苦恼的是，苹果向开发者公布了UI适配的注意事项，强调了不能隐藏设备屏幕的圆角部分，同时也不允许设计顶部黑色状态栏来隐藏刘海。
所以这项政策给开发者带来了巨大的麻烦。好在日前Safari浏览器的引擎WebKit团队为我们详细介绍了该如何为iPhoneX优化UI设计。
▲令人崩溃的UI设计
WebKit团队以Safari为例，简单的说就是将网页内容移动到设备中间没有刘海的区域，但在有刘海的区域同样不能空白。就像上面这样，但也不能被刘海遮住，就像下面这样。
▲刘海遮住了网页内容
利用viewport调整安全区域，就可以利用iPhoneX在安全区域内进行网页设计了，而在这个安全区域内，网页上的内容不会被刘海，圆角遮住。
▲安全区域
在安全区域内设计完后，要将两侧的空白区域填充上相适配的颜色，最终效果就是这样。
▲横屏最终效果
▲竖屏最终效果
最终的效果看起来就好很多，但这只是网页部分的设计，还有更多的APP等着开发者重新设计，相信在11月份苹果iPhoneX上市以后，就已经有不少APP都做好了适配。
- 好文
- 钦佩
- 喜欢
- 泪奔
- 可爱
- 思考
频道推荐
凤凰科技官方微信
视频
-
李咏珍贵私人照曝光：24岁结婚照甜蜜青涩
播放数：145391
-
金庸去世享年94岁，三版“小龙女”李若彤刘亦菲陈妍希悼念
播放数：3277
-
章泽天棒球写真旧照曝光 穿清华校服肤白貌美嫩出水
播放数：143449
-
老年痴呆男子走失10天 在离家1公里工地与工人同住
播放数：165128
