移動端字型小於12號字的時候，line-height劇中的問題
阿新 • • 發佈：2020-07-22
今天的一個偶然機會，看到了一個解決當在安卓移動端的時候，字型小於12號字的時候，line-height設定不能居中的問題。解決方案也很簡單，就是在頁面中的html標籤中， 新增上lang屬性，並且設定為'zh-cmn-hans' 請看下面的程式碼：
1 <html lang="zh-cmn-hans">
然後我自己測試了以下，確實可以。大家可以自己測試一下。不過需要注意的一點是，需要在安卓真機上檢視
1 <!DOCTYPE html> 2 <html lang="zh-cmn-hans"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <style type="text/css"> 8 .box{ 9 width: 100px; 10 height: 100px; 11 background: red; 12 transition: all 1s ease-in-out; 13 } 14 .big{ 15 width: 200px; 16 height: 400px; 17 background: yellow; 18 } 19 .centerDiv{ 20 width: 150px; 21 text-align: center; 22 background: #808080; 23 color: #FFF; 24 height: 14px; 25 border-radius: 20px; 26 margin-top:10px; 27 font-size: 10px; 28 line-height: 14px; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="box"> 34 35 </div> 36 <div class="centerDiv"> 37 一段中文文字 38 </div> 39 <div class="centerDiv"> 40 some English 41 </div> 42 </body> 43 </html>
第二行的程式碼，大家自己註釋掉，然後看移動端的展示效果。下面請看我的截圖
這個是設定了這個屬性的：
下面的截圖是沒有設定的：