再说移动端导航栏之前,我们先说说PC端的导航栏,因为在大多数情况下,PC端的导航栏都不会超出UI设计宽度或浏览器宽度,所以PC端的导航栏就不必多说,反而移动端因为屏幕尺寸问题,往往会超出屏幕宽度,这时候就要用到可以左右滑动移导航栏,而移动端的导航栏对于前端工作人员来说看是简单,其实还有很多BUG问题,其中安卓系统由于国内手机厂商从多,系统定制化五花八门,问题尤为突出,反而苹果系统的用户,由于系统的统一反而相对于安卓系统来说比较问题比较少,现在我们来说说安卓系统导航栏的问题。
现在大部分国内手机用户,用的手机不外乎苹果和安卓,而苹果和谷歌移动端系统的浏览器,用的都是以Webkit为内核的浏览器,从而减少了很多兼容性问题;但应为安卓系统由于国内手机厂商的原因,修改了安卓的底层,对于前端工作人员来说兼容性问比较麻烦,现在来说说我在写移动端导航栏时碰到的问题及解决方案。
一般情况下,写移动端导航栏都会用到display这个属性,且苹果和大部分国内手机厂商的安卓浏览器都兼容,然而在我写好前端导航栏时,在苹果和国内厂商大部分安卓系统测试下都没问题,而魅族手机的浏览器却出现在了兼容性问题,导航栏无法左右移动,且导航栏一行放不下会出现在第二行,严重影响美观;经过我的再三调试,用js最终解决了这个问题,至于怎么解决废话不多说,直接上图。
作者:方维网络前端制作工程师严成