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


 

 
遇到問題:
 
 
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;   (有博友推薦過這個方法,本人目前沒有用到過)
 
 
 
 
 
目前就總結這么幾點咯,等項目中遇到類似的問題,再進行完善:,哈哈,
如果有博友有更好的解決方案,希望留下您寶貴的建議。。。。。。
 
 
 
 
 
 
 
 
 
 
 
 
 
 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM