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

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

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

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

作者：方维网络前端制作工程师严成