[note]Pridestream首页,最佳prprprr

PRIDESTREAM

|地址点我

|头部兼容声明

        网页在PC端的兼容做的相当好啊,Chrome、Firefox、IE、Opera背景视频以及BGM全部可播放。。。手机打开视频是截图,没有BGM,不过是响应式布局看上去也很棒。

<!doctype html>
<!--[if IE 8]> <html class="no-js lt-ie10 lt-ie9"> <![endif]-->
<!--[if IE 9]><html class="no-js lt-ie10"><![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js"> <!--<![endif]-->

        一如既往的条件注释解决IE浏览器兼容性处理

        不过在<head>里出现了这样一行代码

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

‍‍         X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这是一个,文档兼容模式的定义。Edge 模式告诉 IE 以最高级模式渲染文档,也就是任何 IE 版本都以当前版本所支持的最高级标准模式渲染,避免版本升级造成的影响。简单的说,就是什么版本 IE 就用什么版本的标准模式渲染。

        chrome=1激活Chrome Frame,这段是Google开发的一个Google Chrome Frame「Google Chrome 浏览器内嵌框架 - GCF」。使用GCF可以让用户的IE浏览器外观不变,但用户在浏览网页时实际上使用的是Chrome的内核,并且支持Windows XP及以上系统的IE6/7/8。 

    

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

        设备分辨率兼容代码。

<link href="inc/style/screen.css" rel="stylesheet" type="text/css" />

      看来是为移动端特地写了css吧~

<script src="inc/script/lib/modernizr/modernizr.js"></script>

            modernizr.js检测浏览器的css3和HTML5的属性, 介绍:点我

        在<body>中有以下代码:

 <script src="inc/script/app/bundle.js"></script>

        打包了js代码?点我


        因为底部有背景音乐暂停的按钮,对footer比较感兴趣

<li class="btnMute icon-speaker_on" 
data-bind="visible:
 !isMobile(), attr:{'class': isVideoMute()? 'btnMute icon-speaker_off' : 'btnMute icon-speaker_on'},
 click:controller.toggleVideoMute.bind(controller)"></li>

        isMobile是判断手机移动设备:点我

        .bind()是jQuery事件,bind() 方法为被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数。

        看着看着发现一个事,bgm是视频自带的音频,可以直接Mute……我是添加的<audio>……无法适用,残念。

你可能感兴趣的:([note]Pridestream首页,最佳prprprr)