前端開發(fā)

手機網(wǎng)站Html5前端開發(fā)的必備知識點，超贊

3286

開門見山吧！25學(xué)堂的小編直接把這15條手機網(wǎng)站Html5前端開發(fā)必知的干貨分享給大家吧！

手機網(wǎng)站Html5前端開發(fā)的必備知識點

一、Html5 手機網(wǎng)站 input 設(shè)置為type=number 的問題

h5網(wǎng)頁input 的type設(shè)置為number一般會產(chǎn)生三個問題，一個問題是maxlength屬性不好用了。另外一個是form提交的時候，默認給取整了。三是部分安卓手機出現(xiàn)樣式問題。

問題一的解決辦法：

<input name="" type="number" oninput="checkTextLength(this,11)"/>
function checkTextLength(obj,leng){
	if(obj.value.length>leng){
		obj.value=obj.value.substr(0,leng);
		//obj.value=obj.value.substring(0,leng);
		}
}

問題二，是因為form提交默認做了表單驗證，step默認是1,要設(shè)置step屬性，假如保留2位小數(shù)，寫法如下：

<input name="" type="number" step="0.01" min="1" />
演示如下：<input name="" type="search" value="" id="searchID"/> 搜索右邊出現(xiàn)關(guān)閉按鈕

<input name="" type="Date" value=""/>  出現(xiàn)時間日期表
<input name="" type="week" value="" />
<input name="" type="tel" value="" />

有興趣的小伙伴們，可以去試試這些功能。讓我們的移動端開發(fā)非常方便。

關(guān)于step，我在這里做簡單的介紹，input 中type=number，一般會自動生成一個上下箭頭，點擊上箭頭默認增加一個step，點擊下箭頭默認會減少一個step。number中默認 step是1。也就是step=0.01,可以允許輸入2位小數(shù)，并且點擊上下箭頭分別增加0.01和減少0.01。

假如step和min一起使用，那么數(shù)值必須在min和max之間。

看看上面的例子就明白了：

輸入框可以輸入哪些數(shù)字？

首先，最小值是1，那么可以輸入1.0，第二個是可以輸入（1+3.1）那就是4.1,以此類推，每次點擊上下箭頭都會增加或者減少3.1，輸入其他數(shù)字無效。這就是step的簡單介紹。

問題三，去除input默認樣式

使用方法如下：
.elmClass{
   -webkit-appearance:none;
   -moz-appearance:none;
   appearance:none;
}

使用“-webkit-appearance: none; ”來改變按鈕在iPhone下的默認風(fēng)格，其實我們可以反過來思路，使用“appearance”屬性，來改變?nèi)魏卧氐臑g覽器默認風(fēng)格，簡單的說，你可以使用“appearance”屬性將“段落p”渲染成button的風(fēng)格，也可以渲染成“輸入框”、“選擇框”等效果。

用上面的方法同時可以設(shè)置input 按鈕樣式會被默認樣式覆蓋。

二、通過transform進行skew變形，rotate旋轉(zhuǎn)會造成出現(xiàn)鋸齒現(xiàn)象。

解決辦法如下：

.bianxing{ 
-webkit-transform:skew(10deg) rotate(-4deg) translateZ(0);
transform:skew(10deg) rotate(-4deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0);
}

三、移動端 HTML5 audio autoplay 失效問題

這個不是 BUG，由于自動播放網(wǎng)頁中的音頻或視頻，會給用戶帶來一些困擾或者不必要的流量消耗，所以蘋果系統(tǒng)和安卓系統(tǒng)通常都會禁止自動播放和使用 JS 的觸發(fā)播放，必須由用戶來觸發(fā)才可以播放。

解決方法思路：先通過用戶 touchstart 觸碰，觸發(fā)播放并暫停（音頻開始加載，后面用 JS 再操作就沒問題了）。

解決代碼：

document.addEventListener("touchstart",function(){
	document.getElementsByTagName('audio')[0].play();  //播放
	document.getElementsByTagName('audio')[0].pause(); //暫停
});

附上移動端視頻全屏播放代碼：
<video class="video-box" data-index="3" id="video1" x-webkit-airplay="true" webkit-playsinline="true" preload="auto" src="music/guo111.mp4"></video>

四、兩種良好的拼接帶格式字符串的方法

JS拼字符串，一般喜歡用+。如果想要很多行拼在一起，且方便閱讀，一般的做法是：

1
2
3
4
5
6
7
8
9
10
11
12

var
s = '<div>'
+ '<div>'
+'</div>'
+'<div>${a},{{a}}'
+   '<ul>'
+     ''
+     '<li>${p.name}</li>'
+     ''
+   '</ul>'
+'</div>'
+'</div>';

這種已經(jīng)算比較好了，但還是不夠好。比如有太多的+號，有太多的”，這里的結(jié)構(gòu)還算少的，要是再多的話，+和’也會更多。下面是更簡潔的方式，也是我一直在用的：

1
2
3
4
5
6
7
8
9
10
11
12

var ss = '
<div>
<div></div>
<div>${a},{{a}}
<ul>

<li>${p.name}</li>

</ul>
</div>
</div>
';

這種方式的好處顯而易見：不管字符串有多長，始終只有一對”，甚至連+都沒有;效率比第1種略高。你也可以隨時中斷（當然，中斷時就要閉合一次”）,插入變量。

五、其他一些比較實用的手機網(wǎng)站Html5前端開發(fā)知識點。

（1）、防止按鈕點擊時背景閃爍

html{

-webkit-tap-highlight-color: transparent;

}

（2）、設(shè)置input的placeholder內(nèi)容樣式的方法

input::-webkit-input-placeholder{
color:#999;
font-size: 14px;
}

（3）、禁止用戶選中文字 -webkit-user-:none 反之：允許用戶復(fù)制： -webkit-user-:auto。當然這個地方需要注意下， -webkit-user-:auto。必須用在塊元素有效。

（4）、移動端點透問題的解決辦法：

點透，就是在元素綁定 tap 事件，進行元素的隱藏或移動位置時，其底下的元素剛好綁定了 click 事件或有web響應(yīng)的元素時，會觸發(fā)底下元素的響應(yīng)，形成穿透一樣的效果，我們也稱之為點透。在使用 zepto 的 tap 方法時，就會發(fā)生點透現(xiàn)象。

解決方法：