昨天中午接到了第一個(gè)任務(wù)限佩，是一個(gè)h5的頁(yè)面，剛開(kāi)始接到的時(shí)候裸弦，還是很慌的祟同，因?yàn)闆](méi)有做過(guò)這樣的任務(wù)作喘，從來(lái)沒(méi)有認(rèn)真的按照ui去做出一個(gè)看著美美的頁(yè)面。感覺(jué)也甚是開(kāi)心耐亏。
稍微記錄一下遇到的一些簡(jiǎn)單的問(wèn)題徊都，以及簡(jiǎn)單的解決方案沪斟。
- 如何寫(xiě)出適配各種手機(jī)機(jī)型的h5的手機(jī)頁(yè)面广辰？
1: 使用viewport，即在head中添加
<meta name="viewport" content="target-densitydpi=device-dpi,width=750, user-scalable=no">
使用viewport來(lái)自動(dòng)適配各種機(jī)型主之。
2: 不要使用px絕對(duì)的單位择吊，使用rem這種相對(duì)于根的單位。比如：
html{
font-size: 62.5%; //默認(rèn)的字體大小是16槽奕，10/16*100%＝62.5%
}
3: 在使用viewport時(shí)几睛，發(fā)現(xiàn)了一個(gè)巨坑的問(wèn)題，若是將viewport的適配頁(yè)面嵌入到android app中時(shí)粤攒，若android端沒(méi)有設(shè)置支持viewport的話(huà)所森，就會(huì)導(dǎo)致不適配的問(wèn)題。所以夯接，在使用的過(guò)程中要特別的注意焕济。
-
在寫(xiě)的過(guò)程中，踩過(guò)的一些坑盔几，和學(xué)到的一些東西晴弃。
1: 使用h5的video標(biāo)簽 注意最好不要直接在video標(biāo)簽中使用src，那樣很容易造成poster等屬性不能發(fā)揮作用逊拍。另一方面上鞠，source中的src屬性若是.m3u8的格式，則type應(yīng)該使用type="application/vnd.apple.mpegurl"
<video controls poster="images/photo.png">
<source src="xxxxxx.m3u8" type="application/vnd.apple.mpegurl">
您的瀏覽器不支持video
</video>
2: 在微信分享的時(shí)候芯丧，會(huì)有圖片芍阎，最簡(jiǎn)單的設(shè)置方式在head結(jié)尾處使用：
<div id="wx_pic" style="margin:0 auto; display: none;">
</div>
</head>
3: 若要設(shè)置分享標(biāo)題啥的，以前可以隨便設(shè)置缨恒，但是現(xiàn)在需要走微信公眾號(hào)啥的能曾，走微信公眾號(hào)才可以設(shè)置。
4: 完成倒計(jì)時(shí)的功能肿轨，在未到達(dá)規(guī)定的時(shí)間時(shí)寿冕，使用圖片的顯示，上面顯示倒計(jì)時(shí)椒袍，當(dāng)?shù)竭_(dá)規(guī)定時(shí)間時(shí)驼唱，顯示視頻。具體實(shí)現(xiàn)為：
<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: 當(dāng)在本地啟動(dòng)一個(gè)服務(wù)時(shí)驹暑，使用http-server 是相當(dāng)方便的玫恳。它是在node的基礎(chǔ)上運(yùn)行的辨赐，所以在使用它之前要先安裝node。安裝成功后京办，命令行進(jìn)入要運(yùn)行的文件夾掀序，使用命令行http-server就可以了。
