touchweb網站常見問題，手機網站注意問題

1、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); } }

或者

<input type="number" oninput="if(value.length>5)value=value.slice(0,5)" />

或者

簡單方法，直接把number改爲tel 而後設置maxlength

問題二，是由於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; }

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

解決方式以下：

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

設置默認樣式爲none

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

解決方案，設置以下屬性

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

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

設置以下：

select option { direction: rtl; }

5、經過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)

6、移動端點擊300ms延遲

300ms尚可接受，不過由於300ms產生的問題，咱們必需要解決。300ms致使用戶體驗並非很好，解決這個問題，咱們通常在移動端用tap事件來取代click事件。

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

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

7、移動端點透問題

案例以下：

<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連接上。

解決：

一、 儘可能都使用touch事件來替換click事件。例如用touchend事件(推薦)。

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

3 、用preventDefault阻止a標籤的click

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

五、以上通常都能解決，實在不行就換成click事件。

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

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

8、消除 IE10 裏面的那個叉號

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

9、關於 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%;

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

能夠經過正則去掉

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

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

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

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

解決代碼：

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

12、移動端 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','請輸入日期'); };

經過上面代碼應該就能夠解決了！

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

有些機型的搜索input控件會自帶close按鈕（一個僞元素），而一般爲了兼容全部瀏覽器，咱們會本身實現一個，此時去掉原生close按鈕的方法爲

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

若是想使用原生close按鈕，又想使其符合設計風格，能夠對這個僞元素的樣式進行修改。

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

十4、喚起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); };

十5、手機端一像素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); } }

十6、根據設備價值@2x或者@1x或者@3x的圖片

sass代碼

@mixin bgimage($url) { background-image: url($url + "@1x.png"); @media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-device-pixel-ratio: 2.0) { background-image: url($url + "@2x.png"); } }

引入以下：

@include bgimage("./img/site/piowrap");

十7、Sass中@function中px轉rem

$browser-default-font-size: 16px !default;//變量的值能夠根據本身需求定義 html { font-size: $browser-default-font-size; } @function pxTorem($px){//$px爲須要轉換的字號 @return $px / $browser-default-font-size * 1rem; }