主流视频网站页面自适应初探

Mr_zhao
437 阅读4分钟

打开腾讯视频，一边刷着抗日神剧（哦不，这个片子并非贬义上的神剧，事实上质量还是相当不错的），一边啃着我的麦当劳汉堡包，百无聊赖，便随手按下了键盘上的F12键，打开了浏览器的Console调试控制台，这一按不要紧，网站的html源代码瞬间映入眼帘，强烈的好奇心驱使着我继续探究下去。下面的html主体代码是从网站首页抓取的：

<!DOCTYPE html>
<!--[if lte IE 6 ]> <html class="ie ie6 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 7 ]> <html class="ie ie7 lte_ie7 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if IE 9 ]> <html class="ie ie9 lte_ie9" lang="zh-CN"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> 
<html lang="zh-CN"> 
  <!--<![endif]-->
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <meta name="renderer" content="webkit" />
        <meta charset="utf-8">
        <meta http-equiv="Cache-Control" content="max-age=60" />
        <title>腾讯视频 - 中国领先的在线视频媒体平台,海量高清视频在线观看</title>
        <link rel="stylesheet" href="//vm.gtimg.cn/c/=/tencentvideo/vstyle/web/v6/style/css/base.css,head_channel.css,channel/channel_base.css?v=2019070917" />
        <!--[if lte IE 9 ]>
        <link rel="stylesheet" href="//vm.gtimg.cn/c/=/tencentvideo/vstyle/web/v6/style/css/base.ie.css,head_channel.ie.css,channel/channel_base.ie.css?v=2019070917" />
        <![endif]-->
    </head>
    <body>
        ...
    </body>
</html>

第一眼看到的，满满的似曾相识的感觉，不错，这就是IE独有的条件注释语法，不明白的可以看这里IE条件注释详解

想来，腾讯视频也是视频网站的巨头了，肯定会花成本去兼容低版本IE浏览器。

回到正题来，平时会发现这样一个现象，用PC和笔记本打开视频网站，网站的主体内容宽度是不一样的，设备可视区宽度越宽，主体内容宽度就越大。下面还是以腾讯视频为例，在Chrome，Firefox等主流标准浏览器下，可以清楚地看到以下媒体查询Media Querycss代码:

<style type="text/css">
    @media (max-width: 1789px) {
        .mod_row_box .mod_bd, 
        .mod_row_box .mod_hd, 
        .mod_row_box_special {
            width: 1500px;
    }
    @media (max-width: 1549px) { 
        .mod_row_box .mod_bd, 
        .mod_row_box .mod_hd, 
        .mod_row_box_special {
            width: 1200px;   
    }
    @media (max-width: 1280px) {
        .mod_row_box .mod_bd, 
        .mod_row_box .mod_hd, 
        .mod_row_box_special {
            width: 990px;
    }
</style>

就是说，腾讯是采用媒体查询Media Query来适配各种设备尺寸，达到控制主体内容宽度的目的。

那么在不支持媒体查询Media Query的低版本IE浏览器下，腾讯又是怎样做的呢？

于是我打开了笔记本上的fuck IE11，由于笔者的笔记本（分辨率为1366 * 768）已经使用快7年了，性能是大不如前，打开个IE都要老久的了。等到千呼万唤终于打开了，立马输入网站网址，轻轻按下F12，打开开发人员工具，同时切换到仿真标签页下，将文档模式切换到IE8模式，这时我们可以看到以下两个IE条件注释语句 被激活解析：

<!--[if IE 8 ]> <html class="ie ie8 lte_ie8 lte_ie9 screen_ms" lang="zh-CN"> <![endif]-->

<!--[if lte IE 9 ]>
<link rel="stylesheet" href="//vm.gtimg.cn/c/=/tencentvideo/vstyle/web/v6/style/css/base.ie.css,head_channel.ie.css,channel/channel_base.ie.css?v=2019070917" />
<![endif]-->

可以看到html节点被自动加上了class screen_ms，同时加载了需要兼容IE的特有css文件，在css文件里面找到了以下内容：

<style type="text/css">
    .screen_ls .mod_row_box .mod_bd, 
    .screen_ls .mod_row_box .mod_hd, 
    .screen_ls .mod_row_box_special {
        width: 1500px;
    }
    .screen_ms .mod_row_box .mod_bd, 
    .screen_ms .mod_row_box .mod_hd, 
    .screen_ms .mod_row_box_special {
        width: 1200px;   
    }
    .screen_xs .mod_row_box .mod_bd, 
    .screen_xs .mod_row_box .mod_hd, 
    .screen_xs .mod_row_box_special {
        width: 990px;
    }
</style>

可以发现，和媒体查询Media Query里面的代码是一致的。接下来就是要去找找这个class screen_ms是怎么被加上的？果不其然，在一个被压缩混淆过的js文件里面，经过内容格式化美化后，在里面找到了如下代码：

var i = 0,
    o = "screen_ms",
    a = "screen_xs",
    r = "screen_ls",
    s = "screen_xls",
    l = "screen_xxs";
var ie8 = {
    init: function() {
        var t = this;
        $("html").hasClass("lte_ie8") && (t.ie8Width(), $(window).resize(function() {
            clearTimeout(i), i = setTimeout(t.ie8Width, 100)
        }))
    },
    ie8Width: function() {
        var t = "CSS1Compat" === document.compatMode ? document.documentElement.clientWidth : document.body.clientWidth;
        t <= 1280 ? $("html").removeClass([o, r, s, l].join(" ")).addClass(a) : t <= 1549 ? $("html").removeClass([a, r, s, l].join(" ")).addClass(o) : t <= 1789 ? $("html").removeClass([o, a, s, l].join(" ")).addClass(r) : $("html").removeClass([o, a, r, l].join(" ")).addClass(s)
    }
}

可以发现js代码是按照下面的设备或视口大小规则去匹配添加对应的class到html节点上的，不同视频网站的设备尺寸边界会有差异，但原理却是相似的。

屏幕宽度（px） class
<= 1280 screen_xs
<= 1549 screen_ms
<= 1789 screen_ls
> 1789 screen_xls

至此，本节想要探究的问题基本描述完成。如果有时间的话，下一步想去探究下视频、音乐网站是如何针对低版本IE做兼容从而正常地播放视频、音乐的。

avatar
文章
阅读
粉丝