【轉載】移動web問題小結

Meta標籤：

1	< meta content = "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name = "viewport" / >

這個想必你們都知道，當頁面在手機上顯示時，增長這個meta可讓頁面強制讓文檔的寬度與設備的寬度保持1:1，而且文檔最大的寬度比例是1.0，且不容許用戶點擊屏幕放大瀏覽。

1 2	< meta content = "telephone=no" name = "format-detection" / > < meta content = "email=no" name = "format-detection" / >

這兩個屬性分別對ios上自動識別電話和android上自動識別郵箱作了限制。

 

 獲取滾動條的值：

1	window . scrollY   window . scrollX

桌面瀏覽器中想要獲取滾動條的值是經過document.scrollTop和document.scrollLeft獲得的，但在iOS中你會發現這兩個屬性是未定義的，爲何呢？由於在iOS中沒有滾動條的概念，在Android中經過這兩個屬性能夠正常獲取到滾動條的值，那麼在iOS中咱們該如何獲取滾動條的值呢？就是上面兩個屬性，可是事實證實android也支持這屬性，因此索性都用woindow.scroll.

 

禁止選擇文本：

1	- webkit - user - select : none

禁止用戶選擇文本，ios和android都支持

 

屏蔽陰影：

1	- webkit - appearance : none

親測，能夠同時屏蔽輸入框怪異的內陰影，解決iOS下沒法修改按鈕樣式，測試還發現一個小問題就是，加了上面的屬性後，iOS下默認仍是帶有圓角的，不過可使用 border-radius屬性修改。

 

 css之border-box：

1 2 3 4 5 6 7

element {          width : 100 % ;          padding - left : 10px ;          box - sizing : border - box ;          - webkit - box - sizing : border - box ;          border : 1px solid blue ; }

那我想要一個元素100%顯示，又必須有一個固定的padding-left／padding-right，還有1px的邊框，怎麼辦？這樣編寫代碼必然致使出現橫向滾動條，腫麼辦？要相信問題就是用來解決的。這時候偉大的css3爲咱們提供了box-sizing屬性，對於這個屬性的具體解釋不作贅述（想深刻了解的同窗能夠到w3school查看，要知道本身動手會更容易記憶）。讓咱們看看如何解決上面的問題：

 

 css3多文本換行：

1 2 3 4 5 6 7

p {      overflow : hidden ;      text - overflow : ellipsis ;      display : - webkit - box ;      - webkit - line - clamp : 2 ;      - webkit - box - orient : vertical ; }

Webkit支持一個名爲-webkit-line-clamp的屬性，參見連接，也就是說這個屬性並非標準的一部分，多是Webkit內部使用的，或者被棄用的屬性。須要注意的是display須要設置成box，-webkit-line-clamp表示須要顯示幾行。

 

 Retina屏幕高清圖片：

1 2 3 4

selector {    background - image : url ( no - image - set . png ) ;    background : image - set ( url ( foo - lowres . png ) 1x , url ( foo - highres . png ) 2x ) center ; }

image-set的語法，相似於不一樣的文本，圖像也會顯示成不一樣的：

1.  不支持image-set：在不支持image-set的瀏覽器下，他會支持background-image圖像，也就是說不支持image-set的瀏覽器下，他們解析background-image中的背景圖像；
2.  支持image-set：若是你的瀏覽器支持image-sete，並且是普通顯屏下，此時瀏覽器會選擇image-set中的@1x背景圖像；
3.  Retina屏幕下的image-set：若是你的瀏覽器支持image-set，並且是在Retina屏幕下，此時瀏覽器會選擇image-set中的@2x背景圖像。

 

 

 html5重力感應事件：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

if ( window . DeviceMotionEvent ) {                  window . addEventListener ( 'devicemotion' , deviceMotionHandler , false ) ;             }          var speed = 30 ; //speed          var x = y = z = lastX = lastY = lastZ = 0 ;          function deviceMotionHandler ( eventData ) {               var acceleration = event . accelerationIncludingGravity ;                  x = acceleration . x ;                  y = acceleration . y ;                  z = acceleration . z ;                  if ( Math . abs ( x - lastX ) > speed || Math . abs ( y - lastY ) > speed || Math . abs ( z - lastZ ) > speed ) {                      //簡單的搖一搖觸發代碼                      alert ( 1 ) ;                  }                  lastX = x ;                  lastY = y ;                  lastZ = z ;          }

關於deviceMotionEvent是HTML5新增的事件，用來檢測手機重力感應效果具體可參考http://w3c.github.io/deviceorientation/spec-source-orientation.html

 

移動端touch事件：

• touchstart //當手指接觸屏幕時觸發
• touchmove //當已經接觸屏幕的手指開始移動後觸發
• touchend //當手指離開屏幕時觸發
• touchcancel//當某種touch事件非正常結束時觸發

這4個事件的觸發順序爲：

touchstart -> touchmove ->  touchend ->touchcancel

對於某些android系統touch的bug:

好比手指在屏幕由上向下拖動頁面時，理論上是會觸發 一個 touchstart ，不少次 touchmove ，和最終的 touchend ，但是在android 4.0上，touchmove只被觸發一次，觸發時間和touchstart 差很少，而touchend直接沒有被觸發。這是一個很是嚴重的bug，在google Issue已有很多人提出 ,這個很蛋疼的bug是在模擬下拉刷新是遇到的尤爲當touchmove的dom節點數量變多時比出現，當時解決辦法就是用settimeout來稀釋touchmove。

 

單擊延遲：

click 事件由於要等待雙擊確認，會有 300ms 的延遲，體驗並非很好。

開發者大多數會使用封裝的 tap 事件來代替click 事件，所謂的 tap 事件由 touchstart 事件 + touchmove 判斷 + touchend 事件封裝組成。

Creating Fast Buttons for Mobile Web Applications

Eliminate 300ms delay on click events in mobile Safari

 

IOS裏面fixed的文本框焦點居中

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

< ! DOCTYPE html >      < head >      input {        position : fixed ;        top : 0 ; left : 0 ;      }      < / head >      < body >          < div class = "header" >              < form action = "" >                  < label > Testfield : < input type = "text" / > < / label >              < / form >          < / div >      < / body > < / html >

在ios裏面，當一個文本框的樣式爲fixed時候，若是這個文本框得到焦點，它的位置就會亂掉，因爲ios裏面作了自適應居中，這個fixed的文本框會跑到頁面中間。相似：

 

解決辦法有兩個：

能夠在文本框得到焦點的時候將fixed改成absolute，失去焦點時在改回fixed，可是這樣會讓屏幕有上下滑動的體驗不太好。

1 2 3 4 5 6 7 8 9 10

. fixfixed { position : absolute ; } $ ( document )      . on ( 'focus' , 'input' , function ( e ) {          $ this . addClass ( 'fixfixed' ) ;      } )      . on ( 'blur' , 'input' , function ( e ) {          $ this . removeClass ( 'fixfixed' ) ;      } ) ;

 

還有一種就是用一個假的fixed的文本框放在頁面頂部，一個absolute的文本框隱藏在頁面頂部，當fixed的文本框得到焦點時候將其隱藏，而後顯示absolute的文本框，當失去焦點時，在把absolute的文本框隱藏，fixed的文本框顯示。

1 2 3 4 5 6 7 8 9 10 11 12

. fixfixed { position : absolute ; } $ ( document )      . on ( 'focus' , 'input' , function ( e ) {          $ absolute . . show ( ) ;          $ this . hide ( ) ;      } )      . on ( 'blur' , 'input' , function ( e ) {          $ fixed . . show ( ) ;          $ this . hide ( ) ;      } ) ;

 

最後一種就是頂部的input不參與滾動，只讓其下面滾動。

 

position:sticky

position:sticky是一個新的css3屬性，它的表現相似position:relative和position:fixed的合體，在目標區域在屏幕中可見時，它的行爲就像position:relative; 而當頁面滾動超出目標區域時，它的表現就像position:fixed，它會固定在目標位置。

1 2 3 4 5

. sticky { position : - webkit - sticky ; position : sticky ; top : 15px ; }

瀏覽器兼容性：

因爲這是一個全新的屬性，以致於到如今都沒有一個規範，W3C也剛剛開始討論它，而如今只有webkit nightly版本和chrome 開發版(Chrome 23.0.1247.0+ Canary)纔開始支持它。

另外須要注意的是，若是同時定義了left和right值，那麼left生效，right會無效，一樣，同時定義了top和bottom，top贏～～

移動端點透事件

簡單的說，因爲在移動端咱們常常會使用tap(touchstart)事件來替換掉click事件，那麼就會有一種場景是：

1 2 3

< div id = "mengceng" > < / div >   < a href = "www.qq.com" > www . qq . com < / a >

div是絕對定位的蒙層z-index高於a，而a標籤是頁面中的一個連接，咱們給div綁定tap事件：

1 2 3

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

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

緣由：

touchstart 早於 touchend 早於 click。亦即click的觸發是有延遲的，這個時間大概在300ms左右，也就是說咱們tap觸發以後蒙層隱藏，此時click尚未觸發，300ms以後因爲蒙層隱藏，咱們的click觸發到了下面的a連接上。

解決辦法：

1 儘可能都使用touch事件來替換click事件。

2 阻止a連接的click的preventDefault

 

base64編碼圖片替換url圖片

u在移動端，網絡請求是很珍貴的資源，尤爲在2g或者3g網絡下，因此能不發請求的資源都儘可能不要發，對於一些小圖片icon之類的，能夠將圖片用base64編碼，來減小網絡請求。

 

手機拍照和上傳圖片

<input type=」file」>的accept 屬性

1 2 3 4

< ! -- 選擇照片 -- > < input type = file accept = "image/*" > < ! -- 選擇視頻 -- > < input type = file accept = "video/*" >

 

動畫效果時開啓硬件加速

咱們在製做動畫效果時常常會想要改版元素的top或者left來讓元素動起來，在pc端還好可是移動端就會有較大的卡頓感，這麼咱們須要使用css3的  transform: translate3d;來替換，

此效果可讓瀏覽器開啓gpu加速，渲染更流暢，可是筆着實驗時在ios上體驗良好，但在一些低端android機型可能會出現意想不到的效果。

 

快速回彈滾動

在iOS上若是你想讓一個元素擁有像 Native 的滾動效果，你能夠這樣作：

1 2 3 4

. div {          overflow : auto ;          - webkit - overflow - scrolling : touch ;      }

經筆着測試，此效果在不一樣的ios系統表現不一致，

對於局部滾動，ios8以上，不加此效果，滾動的超級慢，ios8一下，不加此效果，滾動還算比較流暢

對於body滾動，ios8以上，不加此效果一樣擁有彈性滾動效果。

 

持續更新中。。

ios和android局部滾動時隱藏原生滾動條

android

1 2 3

:: - webkit - scrollbar {      opacity : 0 ; }

ios

使用一個稍微高一些div包裹住這個有滾動條的div而後設置overflow:hidden擋住之

1 2 3 4 5 6 7 8 9 10 11 12 13 14

. wrap {      height : 100px ;      overflow : hidden ; } . box {      width : 100 % ;      height : - webkit - calc ( 100 % + 5px ) ;      overflow - x : auto ;      overflow - y : hidden ;      - webkit - overflow - scrolling : touch ; } < div class = "wrap" >      < div class = "box" > < / div > < / div >

設置placeholder時候 focus時候文字沒有隱藏

1 2 3

input : focus :: - webkit - input - placeholder {      opacity : 0 ; }

移動端不一樣的input對應不一樣的鍵盤展現樣式

ios —- android

type email

type url

type tel

type search

轉載自AlloyTeam：http://www.alloyteam.com/2015/06/yi-dong-web-wen-ti-xiao-jie/