響應式網(wǎng)站已經(jīng)可以預見到是當前網(wǎng)站建設的大趨勢,但是ie8以下的版本對于響應式的媒體查詢不支持,雖然有間接的方式來曲線救國,但是畢竟是不支持,所以最終還是會有這樣或者那樣的問題。
其實這就跟現(xiàn)在有人拿著諾基亞手機說微信支持是一樣的,注定淘汰的ie6,ie7,與其費力去兼容,還不如在低版本做個提示。
那么網(wǎng)站如何設置內(nèi)容,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>")
}
});
- 版權所有:奇站網(wǎng)絡 轉(zhuǎn)載請注明出處
- 廈門奇站網(wǎng)絡科技有限公司,專業(yè)提供網(wǎng)站建設,響應式網(wǎng)站建設,小程序開發(fā),系統(tǒng)定制開發(fā)。
- 軟件開發(fā)咨詢熱線:吳小姐 13313868605