如何让WebKit优化的网站更兼容
发布网友
发布时间：2022-03-27 03:10
共2个回答
热心网友
时间：2022-03-27 04:39
大型网站集中了优秀的技术人才，做到跨浏览器兼容肯定不在话下。纵观国内移动端主流浏览器：UC浏览器、QQ手机浏览器、iPhone,iPad内置浏览器等等， 一大批基于 WebKit 内核 ，只有排在前3以内的 Opera欧朋浏览器用了 Presto 内核，这或许是原因之一。
2. 其它内核没有 WebKit 兼容性好，没有它先进？
Opera 的欧朋HD 拥有优秀的 Presto 内核，优异的标准兼容性。一些 Opera 的大牛也是 Web标准的制定者 ，所以 Opera 会 率先支持最新特性 ，比如Flexbox 布局，@supports 等。
3. 欧朋HD或其它内核的浏览器只能自己做兼容优化或悲催地访问简版？
在PC端会兼容主流浏览器，在移动端同样有此需求， 跨浏览器兼容性正是前端开发工程师的伟大职责和挑战所在 。
浏览器做兼容存在一些弊端：不好检测网站改版，浏览器的适配可能跟网站的适配产生冲突，有时还需读懂网站的代码逻辑。
移动终端愈发便宜愈发高端，高端的设备打开一个很简陋的网页，简单的图文配上简单的交互，完全没发挥出设备的优势。
4. 跨浏览器兼容性为什么重要，为什么要兼容欧朋HD？
兼容性这个话题非常老了，google一下会有成千上万的帖子。简单而言，的网站如果只能在某一浏览器上正常访问，则略显不专业。资讯、社交、应用类网站会因此减少用户 ，电子商务类网站会因此 减少收入 。
欧朋浏览器 已经成为国内移动端主流的浏览器之一，且 欧朋HD 对 HTML5 的支持很不错。 有的网站在的浏览器兼容性不好，*是它可能并不兼容，成了替罪羊 。
还有一点，喜欢欧朋浏览器的用户，期望访问网站，体验产品，有理由拒绝吗？
============低调的分割线============
书归正传，当前移动互联网的兼容性不是很好，尤其是一些触屏版，仿佛兼容 WebKit 就万事大吉了，仿佛又回到PC端只兼容IE的年代:-(。
欧朋浏览器对应 Opera Mini，欧朋HD对应 Opera Mobile。欧朋浏览器是服务器中转压缩的，突出的是快和省，对HTML5支持不全面；欧朋HD是全功能浏览器，对HTML5支持全面。
做到跨浏览器兼容很难吗？兼容欧朋浏览器和欧朋HD很难嘛？下面跟大家一起探讨。
一、探测浏览器
探测浏览器一般有两种方式：检查 user-agent 字符串和特性检测
检查 user-agent 字符串
欧朋浏览器的 user-agent 像以下格式：
"Opera/9.80 (Android; Opera Mini/7.31996/26.1473; U; zh) Presto/2.8.119 Version/10.54"
"Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/OupengHD-1.3/ADR-1211021236; U; zh-cn) Presto/2.10.254 Version/12.00"
Surface IE10 user-agent 字符串：
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)"
user-agent 一般包含浏览器和平台信息，可以通过正则表达式加以判断。
var isOpera = function(){
var ua = navigator.userAgent;
return {
hd : function(){
return /Opera Mobi/.test(ua);
},
mini : function(){
return /Opera Mini/.test(ua);
}
}
}();
window.onload = function(){
alert(isOpera.hd());
}
特性检测
比较推荐的做法是特性检测：Opera 的浏览器都有 window.opera 对象，欧朋浏览器和 Opera Mini 还有 window.operamini 对象。
var isOpera = Object.prototype.toString.call(window.opera) === "[object Opera]";
var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]";
如果想节省开发时间，知名的 Modernizr 可以协助完成 HTML5、CSS3 特性检测。
二、使用标准模式
移动端使用 HTML5 doctype 即可，标准模式也兼容没特殊指定 “ Transitional” 的 HTML4.0+ 和 XHTML 1.0+ doctype 。
<!DOCTYPE html>
三、更新 CSS 和 DOM API
1. 更新CSS
CSS3 新特性在草案阶段都会增加浏览器厂商前缀，一旦正式的标准推出，都会建议浏览器厂商去掉前缀。WebKit 优化的页面通常只加了” -webkit- “前缀，连无前缀版本都没有，很影响兼容性。
一个跨浏览器兼容的 CSS3 特性通常这么写，添加主流浏览器前缀和无前缀版本：
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
有些较常用的 CSS3 特性 Opera 和其它内核浏览器已支持无前缀特性，例如：border-radius ， box-shadow ， background-size ，WebKit 优化的页面如果多加一句无前缀特性，即可多兼容一些浏览器。
.box_bgsize {
-webkit-background-size: cover; /* Safari 3-4 */
background-size: cover; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */
}
常用的CSS3 特性对应的 Opera 版本
WebKit 版本
Opera 版本
标准版本
-webkit-border-radius border-radius border-radius
-webkit-box-shadow box-shadow box-shadow
-webkit-background-size background-size background-size
-webkit-background-clip background-clip background-clip
-webkit-transform -o-transform transform
-webkit-transition -o-transition transition
-webkit-animation -o-animation animation
@-webkit-keyframes @-o-keyframes @keyframes
-webkit-box flex flex
@-o-viewport @viewport
热心网友
时间：2022-03-27 05:57
大型网站集中了优秀的技术人才，做到跨浏览器兼容肯定不在话下。纵观国内移动端主流浏览器：UC浏览器、QQ手机浏览器、iPhone,iPad内置浏览器等等， 一大批基于 WebKit 内核 ，只有排在前3以内的 Opera欧朋浏览器用了 Presto 内核，这或许是原因之一。
2. 其它内核没有 WebKit 兼容性好，没有它先进？
Opera 的欧朋HD 拥有优秀的 Presto 内核，优异的标准兼容性。一些 Opera 的大牛也是 Web标准的制定者 ，所以 Opera 会 率先支持最新特性 ，比如Flexbox 布局，@supports 等。
3. 欧朋HD或其它内核的浏览器只能自己做兼容优化或悲催地访问简版？
在PC端我们会兼容主流浏览器，在移动端同样有此需求， 跨浏览器兼容性正是前端开发工程师的伟大职责和挑战所在 。
浏览器做兼容存在一些弊端：不好检测网站改版，浏览器的适配可能跟网站的适配产生冲突，有时还需读懂网站的代码逻辑。
移动终端愈发便宜愈发高端，高端的设备打开一个很简陋的网页，简单的图文配上简单的交互，完全没发挥出设备的优势。
4. 跨浏览器兼容性为什么重要，为什么要兼容欧朋HD？
兼容性这个话题非常老了，google一下会有成千上万的帖子。简单而言，我们的网站如果只能在某一浏览器上正常访问，则略显不专业。资讯、社交、应用类网站会因此减少用户 ，电子商务类网站会因此 减少收入 。
欧朋浏览器 已经成为国内移动端主流的浏览器之一，且 欧朋HD 对 HTML5 的支持很不错。 有的网站在我们的浏览器兼容性不好，*是它可能并不兼容我们，我们成了替罪羊 。
还有一点，喜欢欧朋浏览器的用户，期望访问您的网站，体验您的产品，有理由拒绝吗？
============低调的分割线============
书归正传，当前移动互联网的兼容性不是很好，尤其是一些触屏版，仿佛兼容 WebKit 就万事大吉了，仿佛又回到PC端只兼容IE的年代:-(。
欧朋浏览器对应 Opera Mini，欧朋HD对应 Opera Mobile。欧朋浏览器是服务器中转压缩的，突出的是快和省，对HTML5支持不全面；欧朋HD是全功能浏览器，对HTML5支持全面。
做到跨浏览器兼容很难吗？兼容欧朋浏览器和欧朋HD很难嘛？下面跟大家一起探讨。
一、探测浏览器
探测浏览器一般有两种方式：检查 user-agent 字符串和特性检测
检查 user-agent 字符串
欧朋浏览器的 user-agent 像以下格式：
"Opera/9.80 (Android; Opera Mini/7.31996/26.1473; U; zh) Presto/2.8.119 Version/10.54"
"Opera/9.80 (Android 4.0.4; Linux; Opera Mobi/OupengHD-1.3/ADR-1211021236; U; zh-cn) Presto/2.10.254 Version/12.00"
Surface IE10 user-agent 字符串：
"Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; ARM; Trident/6.0; Touch)"
user-agent 一般包含浏览器和平台信息，可以通过正则表达式加以判断。
var isOpera = function(){
var ua = navigator.userAgent;
return {
hd : function(){
return /Opera Mobi/.test(ua);
},
mini : function(){
return /Opera Mini/.test(ua);
}
}
}();
window.onload = function(){
alert(isOpera.hd());
}
特性检测
比较推荐的做法是特性检测：Opera 的浏览器都有 window.opera 对象，欧朋浏览器和 Opera Mini 还有 window.operamini 对象。
var isOpera = Object.prototype.toString.call(window.opera) === "[object Opera]";
var isOperaMini = Object.prototype.toString.call(window.operamini) === "[object OperaMini]";
如果想节省开发时间，知名的 Modernizr 可以协助你完成 HTML5、CSS3 特性检测。
二、使用标准模式
移动端使用 HTML5 doctype 即可，标准模式也兼容没特殊指定 “ Transitional” 的 HTML4.0+ 和 XHTML 1.0+ doctype 。
<!DOCTYPE html>
三、更新 CSS 和 DOM API
1. 更新CSS
CSS3 新特性在草案阶段都会增加浏览器厂商前缀，一旦正式的标准推出，都会建议浏览器厂商去掉前缀。WebKit 优化的页面通常只加了” -webkit- “前缀，连无前缀版本都没有，很影响兼容性。
一个跨浏览器兼容的 CSS3 特性通常这么写，添加主流浏览器前缀和无前缀版本：
.box_gradient {
background-color: #444444;
background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, #444444, #999999); /* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, #444444, #999999); /* Firefox 16+, IE10, Opera 12.50+ */
}
有些较常用的 CSS3 特性 Opera 和其它内核浏览器已支持无前缀特性，例如：border-radius ， box-shadow ， background-size ，WebKit 优化的页面如果多加一句无前缀特性，即可多兼容一些浏览器。
.box_bgsize {
-webkit-background-size: cover; /* Safari 3-4 */
background-size: cover; /* Opera, IE9+, Safari 5, Chrome, Firefox 4+ */
}
常用的CSS3 特性对应的 Opera 版本
WebKit 版本
Opera 版本
标准版本
-webkit-border-radius border-radius border-radius
-webkit-box-shadow box-shadow box-shadow
-webkit-background-size background-size background-size
-webkit-background-clip background-clip background-clip
-webkit-transform -o-transform transform
-webkit-transition -o-transition transition
-webkit-animation -o-animation animation
@-webkit-keyframes @-o-keyframes @keyframes
-webkit-box flex flex
@-o-viewport @viewport
