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

2023-02-07 分类：网站建设

前端工程师

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

作者：创新互联前端制作工程师严成

网页名称：Web前端移动端导航栏制作及出现的问题
网站地址：https://www.cdcxhl.com/news29/235779.html

成都网站建设公司_创新互联，为您提供网站制作、自适应网站、手机网站建设、做网站、微信小程序、服务器托管

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容