移動端：字體大小異常解決方法

 

 

遇到問題：

 

 

1.作移動端頁面，有時在谷歌f12調試時，字體會出現異常放大狀況；

 

2.儘管有時在電腦上調試時是正常的，可是在真機測試也會出現字體異常；

 

 

 

 

 

解決方法：

 

6:給*設置 -webkit-text-size-adjust: none;(omg iphone5出現了不少大小異常狀況，用這個方法，全部問題就解決了)（最簡單有效的方法）

 

 

1.給指定的元素加display:table ;( 我的用到的最多的一個)

 

       eg1:  http://zexi.cn/OMG-mobile-8.29/html/gallery_post.html    

              電腦調試時，textarea字體輸入異常，變大了；(給textarea   display:table下,就完美解決了) ；

 

       eg2: http://zexi.cn/OMG-mobile-8.29/html/venues-detail.html   

             真機測試時   category  price 字體大小不同   (給每一個li display: table下,就能夠了，);

       eg3:http://zexi.cn/OMG-mobile-8.29/html/whats_new.html

            真機測試時   左右字體大小不一致， (給左邊i  display: table下,就能夠了，);

 

 

2.給指定的元素加最大高度 eg:p { max-height: 999999px; }    (有的博友建議給body加，我的認爲沒這個必要,)；

 

3：單獨給搞事的那段標籤設置max-width；

      eg: http://zexi.cn/OMG-mobile-8.29/html/member_pocket.html  

      真機測試時   sort by兩個單詞變大，而且刷新的時候，圈圈也會變大，給父極.sort_select 給個寬度100%，就ok了；(此作法已經用其餘方法代替)

 

4：去掉沒用的類名：

     eg:http://zexi.cn/OMG-mobile-8.29/html/member_bookings.html

      真機測試時   iphone5正常  可是iphone6上的字體紅框裏的字體明顯變小，去掉類名new_m（此類名只寫了背景色），就顯示正常了，

                          （雖然不知道緣由，可是這樣真的解決了問題；）

 

 

 

5.display:inline-block;或者   min-height:1px;   (有博友推薦過這個方法，本人目前沒有用到過)

 

 

 

 

 

目前就總結這麼幾點咯，等項目中遇到相似的問題，再進行完善:，哈哈，

若是有博友有更好的解決方案，但願留下您寶貴的建議。。。。。。