昨天中午接到了第一个任务，是一个h5的页面，刚开始接到的时候，还是很慌的，因为没有做过这样的任务，从来没有认真的按照ui去做出一个看着美美的页面。感觉也甚是开心。
稍微记录一下遇到的一些简单的问题，以及简单的解决方案。
- 如何写出适配各种手机机型的h5的手机页面？
1: 使用viewport，即在head中添加
<meta name="viewport" content="target-densitydpi=device-dpi,width=750, user-scalable=no">
使用viewport来自动适配各种机型。
2: 不要使用px绝对的单位，使用rem这种相对于根的单位。比如：
html{
font-size: 62.5%; //默认的字体大小是16，10/16*100%＝62.5%
}
3: 在使用viewport时，发现了一个巨坑的问题，若是将viewport的适配页面嵌入到android app中时，若android端没有设置支持viewport的话，就会导致不适配的问题。所以，在使用的过程中要特别的注意。
-
在写的过程中，踩过的一些坑，和学到的一些东西。
1: 使用h5的video标签 注意最好不要直接在video标签中使用src，那样很容易造成poster等属性不能发挥作用。另一方面，source中的src属性若是.m3u8的格式，则type应该使用type="application/vnd.apple.mpegurl"
<video controls poster="images/photo.png">
<source src="xxxxxx.m3u8" type="application/vnd.apple.mpegurl">
您的浏览器不支持video
</video>
2: 在微信分享的时候，会有图片，最简单的设置方式在head结尾处使用：
<div id="wx_pic" style="margin:0 auto; display: none;">
</div>
</head>
3: 若要设置分享标题啥的，以前可以随便设置，但是现在需要走微信公众号啥的，走微信公众号才可以设置。
4: 完成倒计时的功能，在未到达规定的时间时，使用图片的显示，上面显示倒计时，当到达规定时间时，显示视频。具体实现为：
<script type="text/javascript">
(function(){
var startTime = Date.parse(new Date("2017/3/22 20:00:00"));
var nowTime = Date.parse(new Date());
if(nowTime < startTime){
document.getElementById("vr-ready").style.display = "block";
document.getElementById("vr-video").style.display = "none";
time();
setInterval(time, 1000);
}else{
document.getElementById("vr-ready").style.display = "none";
document.getElementById("vr-video").style.display = "block";
}
})();
function time(){
var startTime = Date.parse(new Date("2017/3/22 20:00:00"));
var nowTime = Date.parse(new Date());
if(nowTime >= startTime){
document.getElementById("vr-ready").style.display = "none";
document.getElementById("vr-video").style.display = "block";
}else{
var diffTime = (startTime - nowTime)/1000;
var showHour = parseInt(diffTime/3600);
var showMin = parseInt((diffTime%3600)/60);
var showSec = (diffTime%3600)%60;
if(showSec < 10){
showSec = "0" + showSec;
}
if(showMin < 10){
showMin = "0" + showMin;
}
if(showHour < 10){
showHour = "0" + showHour;
}
var showTime = "距离直播还有 " + showHour + ":" + showMin + ":" + showSec;
document.getElementById("vr-time").innerHTML = showTime;
}
}
</script>
5: 当在本地启动一个服务时，使用http-server 是相当方便的。它是在node的基础上运行的，所以在使用它之前要先安装node。安装成功后，命令行进入要运行的文件夹，使用命令行http-server就可以了。
