iPhone X 适配手Q H5 页面通用解决方案

2017/11/12 · HTML5 · 8
评论 · iPhone
X

原文出处:
林焕彬   

导语: iPhone
X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战。
对于手Q中的各业务来说,受iPhone
X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢?

目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下:

一:本文提供两种解决方案

通栏页面

顶部通栏

某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone
X在状态栏增加了24px的高度,对于现在通栏banner规范的内容区域会有遮挡情况。

解决方案:对于通栏页面在页面顶部增加一层高度44px的黑色适配层,整个页面往下挪44px。

这种做法虽然不符合苹果要求的设计规范,但由于短时间内更新全部banner的成本太高,可以先这样简单处理,后续再优化banner的设计展现。

图片 1

底部Tab栏/操作栏

有些页面使用了底部Tab栏/操作栏,由于iPhone
X去掉了底部Home键,取而代之是34px高度的Home Indicator
,对于目前的底部Tab栏/操作栏会造成一定的阻碍。

解决方案:在页面底部增加一层高度34px的适配层,将操作栏上移34px,颜色可以自定义。

图片 2

1.终端解决方案(最优,建议选择)

非通栏页面

底部Tab栏/操作栏

原因同上,在底部有34px高度的Home Indicator
,对于目前的底部Tab栏/操作栏会造成一定的阻碍操作。

解决方案:在页面底部增加一层高度34px的颜色块,将操作栏上移34px,颜色可以自定义。

图片 3

2.web解决方案

 

导语: iPhone
X的出现,一方面对于整个手机行业的发展极具创新领头羊的作用,另一方面也对现有业务的页面适配带来了新的挑战。
对于手Q中的各业务来说,受iPhone
X影响的H5页面挺多,应该采取什么快速有效的办法来应对呢?

 

目前的H5页面可以分为通栏页面和非通栏页面两种,每种页面都可能有底部操作栏,具体如下:

 

通栏页面

 

顶部通栏

 

某些业务的一级页面多数使用了顶部通栏banner的效果,由于iPhone
X在状态栏增加了24px的高度,对于现在通栏banner规范的内容区域会有遮挡情况。

 

解决方案:对于通栏页面在页面顶部增加一层高度44px的黑色适配层,整个页面往下挪44px。

ag捕鱼王app,电玩捕鱼游戏 , 

这种做法虽然不符合苹果要求的设计规范,但由于短时间内更新全部banner的成本太高,可以先这样简单处理,后续再优化banner的设计展现。

 

图片 4

 

Author

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章