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

1、h5網站input 設置爲type=number的問題

h5網頁input 的type設置爲number通常會產生三個問題,一個問題是maxlength屬性很差用了。另一個是form提交的時候,默認給取整了。三是部分安卓手機出現樣式問題。html

問題一解決,我目前用的是js。以下ios

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

或者git

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

或者github

簡單方法,直接把number改爲tel 而後設置maxlengthweb

問題二,是由於form提交默認作了表單驗證,step默認是1,要設置step屬性,假如保留2位小數,寫法以下:api

<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之間。sass

看下面的例子:app

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

輸入框能夠輸入哪些數字?ide

首先,最小值是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; }
相關文章
相關標籤/搜索