360浏览器下页面样式显示异常的解决方法

文章讲述了作者在使用360浏览器访问项目时遇到CSS样式错乱的问题,发现是浏览器默认采用兼容模式导致。通过切换到极速模式问题得到解决。国内多核浏览器为兼容旧网站常会选择错误的内核,为此,作者提供了通过添加meta标签强制浏览器使用Chromium内核的方法,确保网页在各浏览器中正常显示,提升了用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.问题描述

最近由于自己在浏览器使用体验上的差异,从Chrome换为了国产的360浏览器。然后项目在本地开发测试的时候,完全正常;但是在打包部署到服务器后,再用360浏览器访问网页时发现CSS错乱, 页面显示异常。但在换用Chrome、Firefox、QQ浏览器、Edge等其他浏览器访问又是正常的。

2.问题分析

其他浏览器能够正常访问页面,说明是360浏览器自己的问题。后来发现我的360浏览器默认的采用了:兼容模式,如下图所示:
在这里插入图片描述
于是尝试性的将模式切换为:极速模式 后,发现页面重新加载,显示正常了。并且发现其他的很多网站首次打开都默认是极速模式,那为啥自己的项目部署后访问默认是兼容模式呢,如果用户不了解浏览器的这些机制,使用体验将会非常差…于是在查阅资料后发现:

国产浏览器大多是双内核,甚至是三内核。一个Chromium内核,也就是Chrome使用的内核,切换到这个内核的模式一般叫极速模式;一个IE内核,称之为IE模式;有的甚至还有一个修改过的IE内核,称之为兼容模式。

这些浏览器这样做的原因是国内还有大量为IE浏览器量身定做的网站,为了兼容这些网站,不默认启用极速模式,而是根据代码判断选择IE模式或者兼容模式或者极速模式。

问题在于,浏览器自动选择经常判断错误,导致本来使用Webkit可以获得更好浏览效果的网站错误在IE模式中带着BUG运行。让开发者头疼。

2.解决方法

大多数多核浏览器支持通过meta标签指定浏览模式,所以,我们就可以通过meta代码强制浏览器启用Chromium内核,为用户提供最好的使用体验。在网页头部标签内添加以下代码:

<meta name="renderer" content="webkit"/>
<meta name="force-rendering" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

三个都写上避免出现 < meta name=“renderer” content=“webkit” > 不起作用的问题。

这三行代码分别作用于不同环境,如下所述:

<!-- 强制Chromium内核,作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>

<!-- 强制Chromium内核,作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>

<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核,否则强制本机支持的最高版本IE内核,作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
### 360浏览器与谷歌浏览器User-Agent相似的原因 部分中国市场的浏览器,包括360浏览器,在设计其User-Agent字符串时选择了模仿其他主流浏览器的模式。具体来说,360浏览器PC端使用的User-Agent字符串包含了`Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)`这样的前缀[^1]。 实际上,这种做法并非特例。许多国内开发的浏览器为了兼容某些网站特定的功能或样式表,会选择模拟更常见的浏览器标识符。这主要是因为一些网站可能会根据User-Agent来决定页面渲染方式或是提供不同的功能选项。如果这些站点不支持未知类型的浏览器,则可能导致显示异常或其他问题。 对于360浏览器而言,“360SE”的存在作为唯一标识可以帮助区分该请求来自360安全浏览器而非其他产品。然而除了这个特殊标记外,其余部分确实与其他知名浏览器如Internet Explorer有较高的相似度,甚至可能引起混淆。 值得注意的是,虽然两者看起来很像,但这并不意味着它们具有相同的内核或者其他特性;相反,不同厂商的产品通常会有各自独特的实现细节和技术栈。 ```python # 这里展示了一个简单的Python脚本用于解析并比较两个User-Agent字符串 def compare_user_agents(ua1, ua2): # 去除版本号和其他变动因素后的基础结构对比 base_ua1 = " ".join(ua1.split()[:-1]) base_ua2 = " ".join(ua2.split()[:-1]) return base_ua1 == base_ua2 three_six_zero_ua = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; Trident/4.0; InfoPath.2; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727; 360SE)' chrome_like_ua = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)' print(compare_user_agents(three_six_zero_ua, chrome_like_ua)) ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值