公司新闻 行业动态 技术分享

网站如何设置内容,ie8以下提示版本过低或ie8以上才显示

发布日期: 2017-12-21浏览次数: 531

  响应式网站已经可以预见到是当前网站建设的大趋势,但是ie8以下的版本对于响应式的媒体查询不支持,虽然有间接的方式来曲线救国,但是毕竟是不支持,所以最终还是会有这样或者那样的问题。

  其实这就跟现在有人拿着诺基亚手机说微信支持是一样的,注定淘汰的ie6,ie7,与其费力去兼容,还不如在低版本做个提示。

  那么网站如何设置内容,ie8以下提示,或者ie8以上才显示呢?

1、hack

  1. <!--[if lt IE 8]>
  2. <div>為了提供您最佳的瀏覽體驗,建議升級到最新版本或更換瀏覽器。注意:低版本的瀏覽器可能會影響頁面設計。</div>
  3. <![endif]-->

百度一下hack这种方法是最多的,但是IE11仿真测试了没有效果,手头暂时没真实的浏览器可供测试,暂且先写在这里吧。

2、脚本检测

  1. var BrowserDetect = {
  2. init: function() {
  3. this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
  4. this.version = this.searchVersion(navigator.userAgent) ||
  5. this.searchVersion(navigator.appVersion) ||
  6. "an unknown version";
  7. },
  8. searchString: function(data) {
  9. for(var i = 0; i < data.length; i++) {
  10. var dataString = data[i].string;
  11. var dataProp = data[i].prop;
  12. this.versionSearchString = data[i].versionSearch || data[i].identity;
  13. if(dataString) {
  14. if(dataString.indexOf(data[i].subString) != -1)
  15. return data[i].identity;
  16. } else if(dataProp)
  17. return data[i].identity;
  18. }
  19. },
  20. searchVersion: function(dataString) {
  21. var index = dataString.indexOf(this.versionSearchString);
  22. if(index == -1) return;
  23. return parseFloat(dataString.substring(index + this.versionSearchString.length + 1));
  24. },
  25. dataBrowser: [{
  26. string: navigator.userAgent,
  27. subString: "Chrome",
  28. identity: "Chrome"
  29. },
  30. {
  31. string: navigator.vendor,
  32. subString: "Apple",
  33. identity: "Safari",
  34. versionSearch: "Version"
  35. },
  36. {
  37. prop: window.opera,
  38. identity: "Opera",
  39. versionSearch: "Version"
  40. },
  41. {
  42. string: navigator.userAgent,
  43. subString: "Firefox",
  44. identity: "Firefox"
  45. },
  46. {
  47. string: navigator.userAgent,
  48. subString: "MSIE",
  49. identity: "Explorer",
  50. versionSearch: "MSIE"
  51. },
  52. {
  53. string: navigator.userAgent,
  54. subString: "Gecko",
  55. identity: "Mozilla",
  56. versionSearch: "rv"
  57. },
  58. { // for older Netscapes (4-)
  59. string: navigator.userAgent,
  60. subString: "Mozilla",
  61. identity: "Netscape",
  62. versionSearch: "Mozilla"
  63. }
  64. ],
  65. };
  66. BrowserDetect.init();
  1. $(document).ready(function() {
  2. if(BrowserDetect.version <= 7 && BrowserDetect.browser == "Explorer") {
  3. $("body").html("<div class=\"text-center\">為了提供您最佳的瀏覽體驗,建議升級到最新版本或更換瀏覽器。注意:低版本的瀏覽器可能會影響頁面設計。</div>")
  4. }
  5. });

扫一扫关注我们

厦门奇站网络科技有限公司

电话:13313868605

QQ:3413772931

地址:厦门软件园三期A02

网站地图