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

 Web前端     |      2019-11-15 18:44

诺基亚 X 适配手Q H5 页面通用解决方案

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

原稿出处: 林焕彬   

导语: 诺基亚X的产出,一方直面于任何手提式有线电话机行当的上扬极具立异带头羊的效果与利益,另一面也对现成业务的页面适配带来了新的挑衅。 对于手Q中的各职业以来,受索爱X影响的H5页面挺多,应该采用如何快速有效的章程来应对吗?

现阶段的H5页面可以分成通栏页面和非通栏页面三种,每一个页面都大概有尾巴部分操作栏,具体如下:

生龙活虎:本文提供三种减轻方案

通栏页面

最上端通栏

少数事情的超级页面许多选择了最上端通栏banner的成效,由于魅族X在气象栏扩张了24px的惊人,对于当今通栏banner标准的从头到尾的经过区域会有遮挡情状。

除恶务尽方案:对于通栏页面在页面最上部增添大器晚成层高度44px的深棕黑适配层,整个页面往下挪44px。

这种做法固然不契合苹果须要的设计标准,但出于短期内更新任何banner的老本太高,能够先这么回顾管理,后续再优化banner的陈设展现。

图片 1

底部Tab栏/操作栏

稍加页面使用了底层Tab栏/操作栏,由于SamsungX去掉了尾部Home键,代替他是34px高度的Home Indicator ,对于眼下的底层Tab栏/操作栏会促成一定的阻挠。

焚林而猎方案:在页面尾部增添生机勃勃层中度34px的适配层,将操作栏上移34px,颜色能够自定义。

图片 2

1.极端应用方案(最优,提议选用卡塔 尔(英语:State of Qatar)

非通栏页面

底部Tab栏/操作栏

原因同上,在尾巴部分有34px中度的Home Indicator ,对于日前的底层Tab栏/操作栏会促成一定的拦截操作。

消除方案:在页面底部增添风流倜傥层高度34px的颜料块,将操作栏上移34px,颜色能够自定义。

图片 3

2.web解决方案

 

导语: 一加X的面世,一方直面于一切手提式无线电电话机行当的迈入极具创新带头羊的效果,另一面也对现存工作的页面适配带来了新的挑衅。 对于手Q中的各业务以来,受索爱X影响的H5页面挺多,应该使用如何急速有效的章程来应对啊?

 

日前的H5页面能够分成通栏页面和非通栏页面两种,每一个页面都大概有后面部分操作栏,具体如下:

 

通栏页面

 

顶端通栏

 

一点事情的一级页面好多施用了顶上部分通栏banner的效益,由于BlackBerryX在情景栏扩展了24px的可观,对于前几天通栏banner标准的剧情区域会有遮挡景况。

 

解决方案:对于通栏页面在页面最上部增加大器晚成层高度44px的深红适配层,整个页面往下挪44px。

 

这种做法尽管不符合苹果要求的设计标准,但由于长时间内更新任何banner的资金太高,能够先这样总结管理,后续再优化banner的两全表现。

 

图片 4

 

上一篇:面试中常见算法问题详解 下一篇:没有了