移動端line-height問題

標籤：tar   技術   需要   手機瀏覽器   b2c   content   load   upload   ext   

1. ios5 
    
   上：82px;下：84px;
2. ios6 
    
   上：82px;下：84px;
3. ios6 plus 
   
   上：124px;下：126px;
4. mi4w 
   
   上：118px;下：130px;
5. vivo 
    
   上：58px;下：64px;

經過實際操作發現，iOS系統上上下相差兩個像素（也有可能是我測距離的誤差） 
但是Android上相差比較大，而且不同的機型相差數目不一樣

產生原因

問了下技術大神，說是line-height對一部分Android手機不起作用，有自己預設的行高，預設行高為22px（這點我沒有實驗，不知道是否準確）

解決方案

line-height:normal; 
padding:10px 0; 
目前只發現這個方法，沒有發現其他的方法，有新的方法將更新，歡迎大家指正。

 

或者：

關於line-height大家應該非常熟悉了吧，就是用來做垂直置中的，屢試不爽，基本上沒有什麼問題，但是最近一個項目，測試提了一個bug，看圖吧。

從別處竊的圖，這個問題只有安卓上才能複現，做了demo，發現應該是font-size的問題，你們可以自己試試，font-size為13px或者奇數時，line-height會有一定的偏差，在safari上沒有問題，至於原因，現在還沒找到，等找到了再來補充吧。

解決辦法

雖然原因沒有找到，但是可以大致猜出是安卓上奇數字型大小導致line-height均分上下邊距的時候出現了偏差，那麼，我們就可以通過這方面入手。

既然line-height均分不了，那就拋棄line-height吧，看代碼

 

很簡單吧，將line-height設為0，用padding來進行填充，完美實現，自測沒什麼問題，如果造成其他問題，歡迎留言指出

 

UC手機瀏覽器在識別到頁面文字很多的情況下會自動放大字型最佳化閱讀體驗，如果要關閉這個功能需要在網頁頭部添加：
<meta name="wap-font-scale" content="no">

移動端line-height問題