設計 頁面 復制代碼 html posit use 比較 國外 itl

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；

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