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

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

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

問(wè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);
		}
}

問(wèn)題二，是因?yàn)閒orm提交默認(rèn)做了表單驗(yàn)證，step默認(rèn)是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)時(shí)間日期表
<input name="" type="week" value="" />
<input name="" type="tel" value="" />

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

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

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

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

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

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

問(wèn)題三，去除input默認(rèn)樣式

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

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

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

二、通過(guò)transform進(jìn)行skew變形，rotate旋轉(zhuǎn)會(huì)造成出現(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);
}

三、移動(dòng)端 HTML5 audio autoplay 失效問(wèn)題

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

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

解決代碼：

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

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

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

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

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

這種方式的好處顯而易見(jiàn)：不管字符串有多長(zhǎng)，始終只有一對(duì)”，甚至連+都沒(méi)有;效率比第1種略高。你也可以隨時(shí)中斷（當(dāng)然，中斷時(shí)就要閉合一次”）,插入變量。

五、其他一些比較實(shí)用的手機(jī)網(wǎng)站Html5前端開(kāi)發(fā)知識(shí)點(diǎn)。

（1）、防止按鈕點(diǎn)擊時(shí) 背景閃爍

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。當(dāng)然這個(gè)地方需要注意下， -webkit-user-:auto。必須用在塊元素有效。

（4）、移動(dòng)端點(diǎn)透問(wèn)題的解決辦法：

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

解決方法：

1、不要使用 click 事件，用 tap 代替

2、使用 fastclick： https://github.com/ftlabs/fastclick

擴(kuò)展閱讀：

1、移動(dòng)端最實(shí)用的HTML5+CSS3開(kāi)發(fā)教程【大神筆記】

2、四種webAPP橫向滑動(dòng)模式圖解—H5頁(yè)面開(kāi)發(fā)

3、WebAPP移動(dòng)前端性能優(yōu)化規(guī)范和設(shè)計(jì)指導(dǎo)