分享好友 前端技术首页 频道列表

用Meta标签代码让360双核浏览器默认极速模式不是兼容模式

html教程  2015-10-28 15:060

一个网站,大量采用了html5和css3,希望用户都以webkit内核打开页面,但是测试却发现360的以ie内核打开为推荐模式,不知原因为何。其实360给网站开发者设计了一种选择的方法,只要加入一段Meta标签代码就可以解决

以下信息摘自360官方网站:

浏览模式

极速模式、兼容模式及IE9高速模式是360浏览器显示网页时使用的三种模式:

表示极速模式

表示兼容模式

表示IE9/IE10模式(仅在安装了IE9或IE10后可用)

360极速浏览器会自动为您选择使用适合每个网站的浏览模式。所以,通常您不用了解几种内核的区别。

几种模式各有什么特点

极速模式下,网站打开速度快,但某些网站在极速模式下可能出现兼容性问题,显示不正常。
兼容模式下,网站打开速度比极速模式略低,但网页兼容性问题较少。
IE9/IE10模式下,网站会使用IE9/IE10的渲染方式渲染,支持硬件加速及IE9/IE10全新的脚本渲染引擎。

切换浏览模式时,360极速浏览器将会自动同步双核间的数据,让您在双核间能无缝切换。

用户体验计划

在您加入用户体验计划的情况下,我们会将切换的网址发送到360网站,以便我们完善兼容列表库,改进产品。

上传的数据不包含具有您个体特征的信息,且不会泄漏给第三方个人或机构。

若不希望上传切换的网址,您只需在“高级选项”里去掉勾选
“ 将使用情况统计信息和崩溃报告自动发送给360极速浏览器网站,帮助我们完善360极速浏览器”即可。

背景介绍

由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网银、旧版网站。以360的几款浏览器为例,我们优先通过Webkit内核渲染主流的网站,只有小量的网站通过IE内核渲染,以保证页面兼容。在过去很长一段时间里,我们主要的控制手段是一个几百k大小网址库,一个通过长期人工运营收集的网址库。

尽管我们努力通过用户反馈、代码标签智能判断技术提高浏览器的自动切核准确率。但是在很多情况下,我们仍然无法达到百份百正确。因此,我们新增加了一个控制手段:内核控制Meta标签。只要你在自己的网站里增加一个Meta标签,告诉360浏览器这个网址应该用哪个内核渲染,哪么360浏览器就会在读取到这个标签后,立即切换对应的内核。并将这个行为应用于这个二级域名下所有网址。
目前该功能已经在所有的360安全浏览器实现。我们也建议其它浏览器厂商一起支持这个实现。让这个控制标签成为行业标准。

代码示例

在head标签中添加一行代码:

XML/HTML Code复制内容到剪贴板
  1. <html>  
  2. <head>  
  3. <meta name=”renderer” content=”webkit|ie-comp|ie-stand” />  
  4. </head>  
  5. <body>  
  6. </body>  
  7. </html>  

content的取值为webkit,ie-comp,ie-stand之一,区分大小写,分别代表用webkit内核,IE兼容内核,IE标准内核。

若页面需默认用极速核,增加标签:<meta name=”renderer” content=”webkit” />
若页面需默认用ie兼容内核,增加标签:<meta name=”renderer” content=”ie-comp” />
若页面需默认用ie标准内核,增加标签:<meta name=”renderer” content=”ie-stand” />

这里发现一个问题,官方给的信息里结尾是“>”,实际测试时不起作用,这时只要把结尾改为“ />”(注意 / 前面有空格),测试是可行的。

各渲染内核的技术细节

内核 Webkit IE兼容 IE标准
文档模式 Chrome 21 IE6/7 IE9/IE10/IE11(取决于用户的IE)
HTML5支持 YES NO YES
ActiveX控件支持 NO YES YES

各内核UA示例

用<d>Meta</d>标签代码让360双核浏览器默认极速模式不是兼容模式

备注

这个功能其实和IE9的X-UA-Compatible很类似,关于IE几个内核的实现介绍,请看:
http://blogs.msdn.com/b/ie/archive/2010/06/16/ie-s-compatibility-features-for-site-developers.aspx

了解极速模式和兼容模式使用的技术:

极速模式使用的是Webkit内核,Webkit内核是全球最快速的浏览器内核,同时支持了诸多的网页新标准,
但由于Webkit内核较新,国内一些网站尚未较好地支持此内核。

兼容模式使用的是IE浏览器所使用的 Trident 内核,是国内网页制作时主要兼容的浏览器内核,兼容性问题较少。

IE9/IE10模式使用的是IE9/IE10浏览器所使用的新内核,加入了硬件加速、全新的脚本渲染引擎,更标准的HMTL5及CSS3支持。

查看更多关于【html教程】的文章

展开全文
相关推荐
反对 0
举报 0
评论 0
图文资讯
热门推荐
优选好物
更多热点专题
更多推荐文章
html5 中meta中 content=width=device-width注意
!DOCTYPE html        html        head        meta http-equiv="content-type" content="text/html; charset=UTF-8"        meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"        sty

0评论2023-03-08540

HTML里link meta全部标签的作用
做网站建设的时候很少用到太多的标签,但是在网站运营的时候,特别是像移动互联网发展、做SEO之后我们就特别容易看到很多不常见的link标签。那么这些标签都有什么作用呢?E维科技今天来为您整理一下,欢迎其他技术大牛共同分享。HTML里link 和 meta 标签详解m

0评论2023-03-08413

使用Meta自动定时刷新页面及一些HTML标记
Meta自动定时刷新页面:meta http-equiv=”refresh” content=”5;url=http://www.*.com”meta http-equiv=”refresh” content=”5”HTML标记:hr/ 横线b粗体i斜体del删除线ins下划线sub下标sup上标pre原样预览 空格符nbsp;小于号lt;大于号gt;符号amp;"双引

0评论2023-03-08623

html meta
meta 标签可提供页面元素信息, 使用键值对的定义方式,可以记录网页上的主要信息,可以自定义键值对属性 content(必须) , name, http-equiv, scheme, lang常用 meta 头:设置编码信息                        meta http-equiv="Content-Ty

0评论2023-03-08772

标签,搜索引擎">HTML <meta> 标签,搜索引擎
关于Mate标签的详尽解释,请查看w3school 网址为:http://www.w3school.com.cn/tags/tag_meta.aspmeta标签作用META标签是HTML标记HEAD区的一个关键标签,提供文档字符集、使用语言、作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索

0评论2023-03-08574

HTML5移动开发中的meta与link html中的meta标签
metaHTML5移动开发中的一些webkit专属头部标签,能够帮助浏览器更好的解析HTML代码,从而为HTML5移动开发提供更好的前端表现与体验 viewport网页缩放meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scal

0评论2023-02-08929

html的meta标签的charset应该用UTF-8还是utf-8?
  之前我也纠结过写html的时候是用meta charset="UTF-8"/ 或者是 meta charset="utf-8"/  关于这个问题国外网友有讨论过这个问题 https://***.com/questions/10888929/should-html-meta-charset-be-lowercase-or-uppercase  当然html属性是不区分大

0评论2023-02-08509

angular4升级angular5问题记录之No NgModule metadata found for 'AppModule'
在将项目从angular4升级到angular5的过程中,出现No NgModule metadata found for 'AppModule'问题,网上查找答案将app.module.ts进行再次保存编译不报错,出现警告解决方法,更新了package.json文件后,删除package-lock.json文件以及node_modules文件,重新

0评论2023-02-08828

基于meta实现页面的定时刷新或跳转
这篇文章主要介绍了基于meta实现页面的定时刷新或跳转 的相关资料,需要的朋友可以参考下

0评论2016-05-17107

HTML5中meta属性的使用方法
这篇文章主要为大家详细介绍了HTML5中meta属性的使用方法,meta属性在HTML中占据了很重要的位置,一定要重视mata属性,感兴趣的小伙伴们可以参考一下

0评论2016-03-07129

移动端html5 meta标签的神奇功效
制作手机版网站的时候,除了页面简洁、操作方便等访问者可以看到的地方以外,就是 Meta 标签的设置,合理设置 Meta 标签 对手机版网站的搜索引擎优化,手机浏览器的渲染展示都有非常大的帮助

0评论2016-01-15151

常用HTML meta 标签属性(网站兼容与优化需要)
标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务

0评论2015-10-28103

meta标签在移动平台开发中的应用详解
这篇文章主要介绍了meta标签在移动平台开发中的应用详解,需要的朋友可以参考下

0评论2015-09-01187

html网页中meta viewport属性说明
这篇文章主要介绍了html网页中meta viewport属性说明,需要的朋友可以参考下

0评论2015-09-0197

html meta用法示例介绍
html meta可以做很多事情,viewport就可以控制页面的是否可以缩放及初始大小,下面有个示例,大家可以参考下

0评论2015-08-2182

更多推荐