400-800-9385
网站建设资讯详细

Web前端移动端导航栏制作及出现的问题

发表日期:2018-08-16 10:08:43   作者来源:严成   浏览:4899   标签:Web前端    

前端工程师


再说移动端导航栏之前,我们先说说PC端的导航栏,因为在大多数情况下,PC端的导航栏都不会超出UI设计宽度或浏览器宽度,所以PC端的导航栏就不必多说,反而移动端因为屏幕尺寸问题,往往会超出屏幕宽度,这时候就要用到可以左右滑动移导航栏,而移动端的导航栏对于前端工作人员来说看是简单,其实还有很多BUG问题,其中安卓系统由于国内手机厂商从多,系统定制化五花八门,问题尤为突出,反而苹果系统的用户,由于系统的统一反而相对于安卓系统来说比较问题比较少,现在我们来说说安卓系统导航栏的问题。

现在大部分国内手机用户,用的手机不外乎苹果和安卓,而苹果和谷歌移动端系统的浏览器,用的都是以Webkit为内核的浏览器,从而减少了很多兼容性问题;但应为安卓系统由于国内手机厂商的原因,修改了安卓的底层,对于前端工作人员来说兼容性问比较麻烦,现在来说说我在写移动端导航栏时碰到的问题及解决方案。

一般情况下,写移动端导航栏都会用到display这个属性,且苹果和大部分国内手机厂商的安卓浏览器都兼容,然而在我写好前端导航栏时,在苹果和国内厂商大部分安卓系统测试下都没问题,而魅族手机的浏览器却出现在了兼容性问题,导航栏无法左右移动,且导航栏一行放不下会出现在第二行,严重影响美观;经过我的再三调试,用js最终解决了这个问题,至于怎么解决废话不多说,直接上图。

作者:方维网络前端制作工程师严成
如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/4517.html