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

2016-11-09 1610 0 編輯:網站前端設計伍林 來源:網站設計書籍

一、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


七、移動端點透問題

案例如下:

<div id="szhulian">點頭事件測試</div>

<a href="www.sdhowk.live">www.sdhowk.live</a>

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

$('#szhulian').on('tap',function(){

$('#szhulian').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事件,如下:

$("#szhulian").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"> 

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


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

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

#Search::-webkit-search-cancel-button{

    display: none;    

}

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


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

};

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
我們猜你喜歡
七星彩头尾