我有以下 javascript:
<script type="text/javascript">
var isMobile = {
Android: function () {
return navigator.userAgent.match(/Android/i);
},
BlackBerry: function () {
return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function () {
return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function () {
return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function () {
return navigator.userAgent.match(/IEMobile/i);
},
any: function () {
return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
}
};
navigator.sayswho = (function () {
var ua = navigator.userAgent, tem,
M = ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*([\d\.]+)/i) || [];
if (/trident/i.test(M[1])) {
tem = /\brv[ :]+(\d+(\.\d+)?)/g.exec(ua) || [];
return 'IE ' + (tem[1] || '');
}
M = M[2] ? [M[1], M[2]] : [navigator.appName, navigator.appVersion, '-?'];
if ((tem = ua.match(/version\/([\.\d]+)/i)) != null) M[2] = tem[1];
return M.join(' ');
})();
var browserversion1 = navigator.sayswho.split(" ");
var browserversion2 = browserversion1[1].split(".")[0].split(",");
var isIeLessThan10 = (browserversion1[0] == "IE" || browserversion1[0] == "MSIE") && browserversion2[0] < 10
//alert(isIeLessThan10);
if (!isMobile.any()) {
if (isIeLessThan10) {
alert("IE<10");
document.write('<link rel="stylesheet" href="theStyles/defaultStyle_ie.css" type="text/css" charset="utf-8" />');
document.write('<link rel="stylesheet" href="theStyles/captionStyle_ie.css" type="text/css" charset="utf-8" />');
}
else {
alert("IE>=10 || !IE");
document.write('<link rel="stylesheet" href="theStyles/defaultStyle.css" type="text/css" charset="utf-8" />');
document.write('<link rel="stylesheet" href="theStyles/captionStyle.css" type="text/css" charset="utf-8" />');
}
}
else {
alert("mobile");
document.write('<link rel="stylesheet" href="theStyles/defaultStyle_mobile.css" type="text/css" charset="utf-8" />');
document.write('<link rel="stylesheet" href="theStyles/captionStyle_mobile.css" type="text/css" charset="utf-8" />');
}
</script>
以上脚本检查浏览器是移动浏览器还是全功能浏览器。如果是全功能浏览器,则检查 IE 版本是否低于 10,如果是,则加载 defaultStyle_ie.css
样式表,否则,如果是 IE10 或更高版本或任何其他浏览器,则加载 defaultStyle .css
样式表。在 FireFox、Chrome 和 IE8 中一切正常。当我在 IE10 中加载页面时,正在加载 IE8 版本的样式表。我该如何解决?
最佳答案
根据我的评论,加载正常的样式表。
然后为移动设备添加媒体条件。
然后加载IE9以下的样式表
<!-- default stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle.css">
<!-- mobile stylesheets -->
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_mobile.css" media='screen and (max-device-width: 480px)'>
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_mobile.css" media='screen and (max-device-width: 480px)'>
<!-- if ie version 9 or less -->
<!--[if lte IE 9]>
<link rel="stylesheet" type="text/css" href="theStyles/defaultStyle_ie.css">
<link rel="stylesheet" type="text/css" href="theStyles/captionStyle_ie.css">
<![endif]-->
关于javascript - 为什么IE10会加载旧版IE样式表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22149064/