http://www.web008.net

页面通用解决方案,适配手机端

摩托罗拉 X 适配手Q H5 页面通用技术方案

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

原来的文章出处: 林焕彬   

导语: 金立X的出现,一方面前境遇于全部手提式有线话机行当的上进极具立异起头羊的法力,另一方面也对现成业务的页面适配带来了新的挑衅。 对于手Q中的各业务以来,受金立X影响的H5页面挺多,应该接Nash么样神速有效的秘诀来应对啊?

美高梅手机版,此时此刻的H5页面能够分为通栏页面和非通栏页面二种,每一个页面都也可能有尾部操作栏,具体如下:

一:本文提供三种缓和方案

通栏页面

最上端通栏

某个事情的一流页面相当多使用了顶上部分通栏banner的效能,由于红米X在状态栏扩张了24px的可观,对于明天通栏banner规范的剧情区域会有遮挡情形。

消除方案:对于通栏页面在页面最上端扩充一层中度44px的浅莲灰适配层,整个页面往下挪44px。

这种做法即使不适合苹果供给的设计标准,但鉴于长期内更新任何banner的资金财产太高,能够先这么轻便管理,后续再优化banner的规划表现。

美高梅手机版 1

底部Tab栏/操作栏

稍微页面使用了底层Tab栏/操作栏,由于酷派X去掉了尾巴部分Home键,代替他是34px中度的Home Indicator ,对于这几天的尾部Tab栏/操作栏会招致一定的阻拦。

减轻方案:在页面尾部扩张一层中度34px的适配层,将操作栏上移34px,颜色能够自定义。

美高梅手机版 2

1.极限施工方案(最优,提出选择)

非通栏页面

底部Tab栏/操作栏

原因同上,在底层有34px中度的Home Indicator ,对于当前的最底层Tab栏/操作栏会形成一定的阻碍操作。

赶尽杀绝方案:在页面尾部扩充一层中度34px的水彩块,将操作栏上移34px,颜色能够自定义。

美高梅手机版 3

2.web解决方案

 

导语: 索爱X的面世,一方面临于一切手提式有线电话机行当的升高极具创新牵头羊的功用,另一方面也对现成职业的页面适配带来了新的挑衅。 对于手Q中的各工作以来,受BlackBerryX影响的H5页面挺多,应该运用哪些急迅有效的点子来应对啊?

 

近年来的H5页面能够分成通栏页面和非通栏页面三种,每一个页面都大概有尾部操作栏,具体如下:

 

通栏页面

 

最上端通栏

 

少数事情的一流页面相当多选用了最上部通栏banner的职能,由于酷派X在状态栏扩充了24px的冲天,对于当今通栏banner标准的源委区域会有遮挡情状。

 

杀鸡取卵方案:对于通栏页面在页面最上端扩张一层中度44px的栗褐适配层,整个页面往下挪44px。

 

这种做法即使不符合苹果需要的设计标准,但鉴于长期内更新任何banner的本钱太高,能够先那样轻便管理,后续再优化banner的设计表现。

 

美高梅手机版 4

 

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。