小谈网站建设的兼容性

时间 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的时候了。

网站性能

网站性能其实也能和兼容性搭上个边，服务器开启gzip,前端压缩合并各类静态资源，一方面减轻了整个网站的大小，同时也能减轻http的请求数量，而这对于性能不够好的浏览器能更好的减轻他们的负担。

而关于这方面的东西都是须要结合自动化解决方案的，这方面的文章请看fouber老师的我的博客