响应式网站已经可以预见到是当前网站建设的大趋势,但是ie8以下的版本对于响应式的媒体查询不支持,虽然有间接的方式来曲线救国,但是毕竟是不支持,所以最终还是会有这样或者那样的问题。
其实这就跟现在有人拿着诺基亚手机说微信支持是一样的,注定淘汰的ie6,ie7,与其费力去兼容,还不如在低版本做个提示。
那么网站如何设置内容,ie8以下提示,或者ie8以上才显示呢?
1、hack
<!--[if lt IE 8]>
<div>為了提供您最佳的瀏覽體驗,建議升級到最新版本或更換瀏覽器。注意:低版本的瀏覽器可能會影響頁面設計。</div>
<![endif]-->
百度一下hack这种方法是最多的,但是IE11仿真测试了没有效果,手头暂时没真实的浏览器可供测试,暂且先写在这里吧。
2、脚本检测
var BrowserDetect = {
init: function() {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent) ||
this.searchVersion(navigator.appVersion) ||
"an unknown version";
},
searchString: function(data) {
for(var i = 0; i < data.length; i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if(dataString) {
if(dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
} else if(dataProp)
return data[i].identity;
}
},
searchVersion: function(dataString) {
var index = dataString.indexOf(this.versionSearchString);
if(index == -1) return;
return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
},
dataBrowser: [{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera",
versionSearch: "Version"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
};
BrowserDetect.init();
$(document).ready(function() {
if(BrowserDetect.version <= 7 && BrowserDetect.browser == "Explorer") {
$("body").html("<div class=\"text-center\">為了提供您最佳的瀏覽體驗,建議升級到最新版本或更換瀏覽器。注意:低版本的瀏覽器可能會影響頁面設計。</div>")
}
});
- 版权所有:奇站网络 转载请注明出处
- 厦门奇站网络科技有限公司,专业提供网站建设,响应式网站建设,小程序开发,系统定制开发。
- 软件开发咨询热线:吴小姐 13313868605