前言

之前總結了移動端那些事兒（一）移動端開發注意事項。具體地址是：http://blog.csdn.net/qq_39198420/article/details/77848222 里面羅列了一下手機網站常見問題，本文再在其基礎上，補充一些。

一、h5網站input 設置為type=number的問題

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

問題一解決，我目前用的是js。如下

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

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

<input type="number" step="0.01" />

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

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

看下面的例子：

<input type="number" step="3.1" min="1" />

輸入框可以輸入哪些數字？

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

問題三，去除input默認樣式

input[type=number] {-moz-appearance:textfield; } input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {-webkit-appearance: none;margin: 0; }

二、ios 設置input 按鈕樣式會被默認樣式覆蓋

解決方式如下：

input, textarea {border: 0; -webkit-appearance: none; }

設置默認樣式為none

三、IOS鍵盤字母輸入，默認首字母大寫

解決方案，設置如下屬性

<input type="text" autocapitalize="off" />

四、select 下拉選擇設置右對齊

設置如下：

select option { direction: rtl; }

五、通過transform進行skew變形，rotate旋轉會造成出現鋸齒現象

可以設置如下：

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

六、移動端點擊300ms延遲

300ms尚可接受，不過因為300ms產生的問題，我們必須要解決。300ms導致用戶體驗并不是很好，解決這個問題，我們一般在移動端用tap事件來取代click事件。

推薦兩個js，一個是fastclick，一個是tap.js

關于300ms延遲，具體請看：http://thx.github.io/mobile/300ms-click-delay/

七、移動端點透問題

案例如下：

<div id="haorooms">點頭事件測試</div><a href="www.haorooms.com">www.haorooms.com</a>

div是絕對定位的蒙層,并且z-index高于a。而a標簽是頁面中的一個鏈接，我們給div綁定tap事件：

$('#haorooms').on('tap',function(){ $('#haorooms').hide(); });

我們點擊蒙層時 div正常消失，但是當我們在a標簽上點擊蒙層時，發現a鏈接被觸發，這就是所謂的點透事件。

原因：

touchstart 早于 touchend 早于click。 亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說我們tap觸發之后蒙層隱藏， 此時 click還沒有觸發，300ms之后由于蒙層隱藏，我們的click觸發到了下面的a鏈接上。

解決：

1、 盡量都使用touch事件來替換click事件。例如用touchend事件(推薦)。

2、用fastclick，https://github.com/ftlabs/fastclick

3 、用preventDefault阻止a標簽的click

4、延遲一定的時間(300ms+)來處理事件 （不推薦）

5、以上一般都能解決，實在不行就換成click事件。

下面介紹一下touchend事件，如下：

$("#haorooms").on("touchend", function (event) {event.preventDefault();});

八、消除 IE10 里面的那個叉號

input:-ms-clear{display:none;}

九、關于 iOS 與 OS X 端字體的優化(橫豎屏會出現字體加粗不一致等)

iOS 瀏覽器橫屏時會重置字體大小，設置 text-size-adjust 為 none 可以解決 iOS 上的問題，但桌面版 Safari 的字體縮放功能會失效，因此最佳方案是將 text-size-adjust 為 100% 。

-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%;

十、關于 iOS 系統中，中文輸入法輸入英文時，字母之間可能會出現一個六分之一空格

可以通過正則去掉

this.value = this.value.replace(/\u2006/g, '');

十一、移動端 HTML5 audio autoplay 失效問題

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

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

解決代碼：

document.addEventListener('touchstart', function () {document.getElementsByTagName('audio')[0].play();document.getElementsByTagName('audio')[0].pause(); });

十二、移動端 HTML5 input date 不支持 placeholder 問題

這個我感覺沒有什么好的解決方案，用如下方法

<input placeholder="Date" class="textbox-n" type="text" onfocus="(this.type='date')" id="date">

有的瀏覽器可能要點擊兩遍！

方法二

input[type="date"]:before{content: attr(placeholder);color:#ddd; }

js部分

var o = document.getElementById('date'); o.onfocus = function(){this.removeAttribute('placeholder'); }; o.onblur = function(){if(this.value == '') this.setAttribute('placeholder','請輸入日期'); };

通過上面代碼應該就可以解決了！

十三、部分機型存在type為search的input，自帶close按鈕樣式修改方法

有些機型的搜索input控件會自帶close按鈕（一個偽元素），而通常為了兼容所有瀏覽器，我們會自己實現一個，此時去掉原生close按鈕的方法為

#Search::-webkit-search-cancel-button{display: none; }

如果想使用原生close按鈕，又想使其符合設計風格，可以對這個偽元素的樣式進行修改。

美化的話，請看http://www.haorooms.com/post/qd_ghfx 這篇文章的第五條！

十四、喚起select的option展開

zepto方式:

$(sltElement).trrgger("mousedown");

原生js方式:

function showDropdown(sltElement) {var event;event = document.createEvent('MouseEvents');event.initMouseEvent('mousedown', true, true, window);sltElement.dispatchEvent(event); };

十五、手機端一像素border設置

假如border所在div的class名字是haorooms

.haorooms:after, .haorooms:after {border-top: 1px solid #bfbfbf;content: ' ';display: block;width: 100%;position: absolute;left: 0;bottom: 0; }/* 1.5倍 */ @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 150/100), only screen and (min-device-pixel-ratio: 1.5) {.haorooms:after,.haorooms:after {-webkit-transform: scaleY(0.7);transform: scaleY(0.7);} }/* Retina 適配 */@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min--moz-device-pixel-ratio: 2.0), only screen and (-o-min-device-pixel-ratio: 200/100), only screen and (min-device-pixel-ratio: 2.0) {.haorooms:after,.haorooms:after {-webkit-transform: scaleY(0.5);transform: scaleY(0.5);} }/* 三倍屏 適配 */@media only screen and (-webkit-min-device-pixel-ratio: 2.5), only screen and (min--moz-device-pixel-ratio: 2.5), only screen and (-o-min-device-pixel-ratio: 250/100), only screen and (min-device-pixel-ratio: 2.5) {.haorooms:after,.haorooms:after {-webkit-transform: scaleY(0.33333334);transform: scaleY(0.33333334);} }

總結

以上是生活随笔為你收集整理的移动端那些事儿（四）移动端开发注意事项的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。