移動開發實踐及‘坑’總結

1.input   placeholder問題　　

在chrome 模擬移動端調試時［左邊圖］，顯示的很是正常，可是在真機上［右邊圖］，placeholder裏面的內容明顯靠上，很是的不美觀

    

在國外網站，對這個屬性的兼容性處理，那就是不要設計input的line-height或者設置line-height爲normal便可，

試了一下，雖然在谷歌模擬調試裏稍微偏上，可是在「真機上」正常垂直居中～

 

2.line－height

line-height常常用於文字居中，不一樣手機顯示效果不同。什麼鬼～

在chrome模擬器上又是顯示得很是完美，可是！Android和IOS又各自‘偏移’了。若是把 line-height加1px，iPhone文字就會稍微‘正常顯示’，因爲咱們app的ios用戶居多，而且android機型太多，不一樣機型也會顯示不一樣，因此只能退而求其次了。line-height的兼容問題不太好解決，容器高度越小，顯示效果的差距越明顯。

解決方案：稍微大一點的高度，最好把line-height設置爲高度+1px，兩個平臺顯示都不會太‘奇怪’。

 

3.使用rem  （兼容性：ie9+）

原理：瀏覽器的 默認字體高都是16px，未經調整的瀏覽器在顯示1em=16px。 rem則是隻相對於根元素的font-size，即只須要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比便可；

通常使用：設置html的font-size爲62.5%

 1 html {
 2     font-size: 62.5%;
 3 }
 4 body {
 5     font-size: 12px;
 6     font-size: 1.2rem;
 7 }
 8 p {
 9     font-size: 14px;
10     font-size: 1.4rem;
11 }

 

 

4.實現自定義原生控件的樣式

因爲select移動端原生樣式很醜，可是原生彈出樣式是符合咱們設計的原則

解決方法：將本來select 設置爲透明，z-index設置高～再用一個比較好看的樣式‘僞裝’在表面

 

5.移動端使用innerHtml繪製

使用innerHTML繪製大段，以後想獲取HTML的ID節點，事實上是獲取不到的，這種問題在動態建立DOM會常常發生

這也是一個神器的問題，博主本身寫了一個移動端輪播插件，在chrome上瀏覽很是正常，但到了真機上卻顯示空白，各類百度，最後才發現這麼坑的地方…

解決方案：嘗試了不少方法以後，老老實實在頁面直接用html結構，若是有更好的方法，也請告訴我。

 

6.300ms延遲

• 方案一：禁用縮放

在HTML文檔頭部包含以下 meta標籤時：

<meta name="viewport" content="user-scalable=no"/>

<meta name="viewport" content="initial-scale=1,maximum-scale=1"/>

 

缺點------就是必須經過徹底禁用縮放來達到去掉點擊延遲的目的，然而徹底禁用縮放並非咱們的初衷，咱們只是想禁掉默認的雙擊縮放行爲，這樣就不用等待300ms來判斷當前操做是不是雙擊。

 

• 方案二：更改默認的視口寬度

<meta name="viewport" content="width=device-width"/>

若是設置了上述meta標籤，那瀏覽器就能夠認爲該網站已經對移動端作過了適配和優化，就無需雙擊縮放操做了。
這個方案相比方案一的好處在於，它沒有徹底禁用縮放，而只是禁用了瀏覽器默認的雙擊縮放行爲，但用戶仍然能夠經過雙指縮放操做來縮放頁面。

 

兼容性問題：

對於方案一和方案二，Chrome是率先支持的，Firefox緊隨其後，然而令Safari頭疼的是，它除了雙擊縮放還有雙擊滾動操做，若是採用這種兩種方案，那勢必連雙擊滾動也要一塊兒禁用。

 

7.點擊穿透

問題常見發生場景： 假如頁面上有兩個元素A和B。B元素在A元素之上。咱們在B元素的touchstart事件上註冊了一個回調函數，該回調函數的做用是隱藏B元素。咱們發現，當咱們點擊B元素，B元素被隱藏了，隨後，A元素觸發了click事件。

這是由於在移動端瀏覽器，事件執行的順序是touchstart > touchend > click。

而click事件有300ms的延遲，當touchstart事件把B元素隱藏以後，隔了300ms，瀏覽器觸發了click事件，可是此時B元素不見了，因此該事件被派發到了A元素身上。若是A元素是一個連接，那此時頁面就會意外地跳轉。

解決思路：

1.不要混用touch和click 

2.消耗掉touch以後的click

解決方法：

1.只用touch   把頁面內全部click所有換成touch事件（ touchstart 、’touchend’、’tap’），注意：a標籤的href也是click，須要換成js的跳轉。 

2.改動最小——350ms後再隱藏B元素

 

8. 虛擬鍵盤致使fixed元素錯位

fixed元素必定會伴隨虛擬鍵盤的出現，可是虛擬鍵盤只是「貼」在了viewport上，表面上不會對dom產生「任何」影響，可是這個時候fixed元素表現卻變得怪異起來，會錯位。

解決原理：虛擬鍵盤彈出時將fixed元素設置爲static，虛擬鍵盤消失時候設置回來。

解決方案：因爲虛擬鍵盤出現並未拋出事件，而檢測scroll或者resize事件，皆會有必定延遲，會出現閃爍現象。則當前獲取焦點元素爲文本元素，就將fixed元素設置爲static。

 

9.移動端手勢

手指放在屏幕上：ontouchstart     手指在屏幕上滑動：ontouchmove      手指離開屏幕：ontouchend

原理：

1.在touchstart事件觸發時，  記錄手指按下的時間startTime，本次滑動的初始位置initialPos。

2.在touchmove事件觸發時， 記錄當前位置nowPosition（實時移動元素），滑動距離movePosition（當前位置nowPosition與初始位置initialPos的差值），判斷正負數再決定是左仍是右移動。

3.在touchend事件觸發時，   記錄手指離開屏幕的時間endTime，得到手指在屏幕上停留的時間（endTime－startTime），滑動距離movePosition

• 判斷是否滑動：

1. 若是停留時間少於300ms，則認爲是快速滑動，不管滑動距離是多少，都到下一頁
2. 滑動距離與‘容器’  大小進行比較，若超過‘容器’大小的1/3，則到下一頁

 

10.iphone動態生成html元素click失效

這個也是神奇的坑，找了好久資料，也沒有很原理的解釋。

解決方法：  爲綁定click的元素增長css樣式   cursor：pointer；