小談網站建設的兼容性

時間 2019-11-05

原文原文鏈接

本文的兼容性包含了更多的意思，一些和網站開發注意的實際問題。對注重seo的網站幫助更多一些。css

關於瀏覽器

如今的前端開發已經開始放棄兼容ie6,ie7,而且也在有條件的放棄ie8。像chrome這樣的現代瀏覽器對新特性支持度都很棒，只是在某些新特性上的實現方式並不太統一。html

這是百度統計最近六個月的數據，ie6和ie7合起來仍是有9.03%，360是被統計到各類內核中了。前端

而如今須要咱們考慮的就是ie瀏覽器了。對於ie6,ie7須要去寫不少hack代碼，很是醜陋而且還要花費大把的時間去調試，然而如今真正使用這兩個瀏覽器的人倒是很少的，與其這樣還不如把精力投入到大部分用戶羣體上，爲他們提供更好的體驗。jquery

因此是時候放棄兼容他們了，可是咱們也不能把使用這兩個瀏覽器的用戶放棄掉，因此咱們應該加一些讓他們更新瀏覽器的提示，像下面這樣：css3

<!--[if lte IE 8]>
    <div>
        您正在使用的瀏覽器版本太低，沒法達到最佳體驗效果。建議使用如下瀏覽器：
        <a href="http://se.360.cn" target="_blank">360瀏覽器</a> / 
        <a href="http://ie.sogou.com" target="_blank">搜狗瀏覽器</a> /
        <a href="http://browser.qq.com" target="_blank">QQ瀏覽器</a>/
        <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html"
         target="_blank">Chrome</a> /
        <a href="http://http://www.firefox.com.cn" target="_blank">火狐瀏覽器</a>     
    </div>
<![endif]-->

之因此把喜好的chrome放到後面，是由於既然他們正在使用低版本瀏覽器就並不太會使用chrome,而國產瀏覽器更適合大多數人使用git

文檔模式

ie8在win7和XP下的表現也是不一樣的，由於文檔模式，在舊有的文檔模式下，並不能正確識別HTML5的新標籤。這是最近六個月的操做系通通計數據：github

首先在head加文檔模式的選擇，和瀏覽器內核的選擇web

<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="renderer" content="webkit">

而xp系統下的ie8並無edge文檔模式，因此這裏使用modernizr,它能讓你放心使用HTML5標籤，而且還能檢測瀏覽器的能力，根據不一樣的能力來實現不一樣的東西。壓縮版已經足夠小了，這裏把它放到頭部。chrome

<script src="/dep/Modernizr/modernizr.js"></script>

顯示分辨率

如今屏幕的分辨率也是各類尺寸了，下面是各類分辨率的統計數據：瀏覽器

大屏已是趨勢了，可是1024*768這個附近應該還有很多，分辨率這個問題咱們不能像瀏覽器那樣提示更換顯示器吧，畢竟有不小成本，因此仍是要藉助代碼來實現響應式，對於比較複雜的網頁實現1200px和1000px就能夠了，由於桌面端的網站並不適合手機端，就算你使用響應式，也存在不少其餘問題。尤爲ie8並不能識別@media語法，因此要藉助Respond.js

<!--[if lt IE 9]>
    <script src="/dep/respond/dest/respond.min.js"></script>
<!--<![endif]-->

到這裏咱們的頭部看起來是這樣的:

<!DOCTYPE html>
<html class="no-js" lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>網站建設</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

    <link rel="stylesheet" href="/static/main.css">
    <script src="/dep/Modernizr/modernizr.js"></script>
    <!--[if lt IE 9]>
    <script src="/dep/respond/dest/respond.min.js"></script>
    <!--<![endif]-->
</head>
<body>
    <!--[if lte IE 8]>
    <div>
        您正在使用的瀏覽器版本太低，沒法達到最佳體驗效果。建議使用如下瀏覽器：
        <a href="http://se.360.cn" target="_blank">360瀏覽器</a> /
        <a href="http://ie.sogou.com" target="_blank">搜狗瀏覽器</a> /
        <a href="http://browser.qq.com" target="_blank">QQ瀏覽器</a>/
        <a href="http://www.google.cn/intl/zh-CN/chrome/browser/desktop/index.html"
         target="_blank">Chrome</a> /
        <a href="http://http://www.firefox.com.cn" target="_blank">火狐瀏覽器</a>
    </div>
    <![endif]-->

css樣式和Jquery

如今的前端開發已經翻天覆地了，less和sass大行其道，沒有使用小夥伴趕快嘗試吧。css3的新屬性須要寫不少兼容方式，想下面這種寫法應該很煩了吧。

.gradient{
    background: -moz-linear-gradient(top, #000000 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, 
                                 color-stop(0%,#000000), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -o-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: -ms-linear-gradient(top, #000000 0%,#ffffff 100%);
    background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

因此咱們要感謝Autoprefixer這樣的工具，這裏藉助自動化方案結合它使用是很爽的。只要寫標準的方式便可，其餘的都交給它吧。

.gradient{
        background: linear-gradient(to bottom, #000000 0%,#ffffff 100%);
}

Jquery已經快出生十年了，它就是爲了解決瀏覽器的兼容性而生的，對於桌面端開發咱們仍是建議採用jquery-1.11.1這個版本。而咱們也很清楚它的性能並不高，比原生的js性能最多能差出幾十倍，因此咱們也不必定並不是要使用它，要根據本身網站的真實用戶統計數據來決定將來的解決方案，不斷的引導本身網站用戶使用更新的瀏覽器，當低端瀏覽器的份額足夠低的時候，就是你能夠拋棄jquery的時候了。