手機瀏覽pc網頁，字型顯示比樣式中設定的字型更大
阿新 • • 發佈：2018-12-23
用手機訪問專案的一個內容頁時，正文的字型比邊欄的字型要大，但是樣式中他們的font-size大小是一樣的。其中的程式碼片段如下
1 <style> 2 html{font-size: 14px;} 3 .p{width: 600px;} 4 p{zoom:1;display: inline-block;width: 600px;} 5 6 </style> 7 <body style="font-size: 14px;line-height: 1.5;"> 8 9 <div class="p"> 10 <img src="images/lx.jpg" alt="連續的圖片" style="width: 80%;"/> 11 <div style="height:20px;">連續的圖片</div> 12 <p>一直</p> 13 <p style="font-size: 14px;line-height: 1.5;">歲月流轉，四季輪迴，不管世事怎樣變遷，一切過往，終將在流光浸染的光陰裡煙消雲散。就讓一份自然隨意的從容，含一枚清喜的淺笑，在筆墨的起落間，隨著風塵的淡暖，染一紙去留無意的隨緣。</p> 14<p>時光深處，握一縷溫柔的繾綣，縈繞心中淺淺的細膩和溫柔，那靜靜的溫馨，便在眉宇間落下一抹輕輕的安然。於是，每一次憶及那些留在歲月的往事，便都會有不同的清喜，而每一天生活所賦予的，正是恬淡中那份禪意的美好。</p> 15 <a href="vp.html">to the viewport page</a> 16 </div>
結果顯示如圖：（注：此處的 連續的圖片 幾個字的font-size和下面的p中的文字的font-seize大小一樣）
為什麼，連續的圖片 這幾個字和下面的字大小不一樣呢，於是我使用遠端除錯工具檢視他們在手機中的樣式，發現p的高度，不知道是怎麼計算出來的。如圖
於是就慢慢地去除錯吧：
方法一：給所有的p加上一個zoom:1; 結果不好使，沒效果.。
方法二：給header裡面加上meta<meta name="viewport" content="initial-scale=1">,安卓下字型都是一樣大的（我的魅族下是這樣），而且p的高度也是正常計算出來的；但是蘋果不買單，還是一大一小，安卓下遠端除錯如圖：
方法三：把p的父類div的寬度樣式去掉（即預設的100%） ,字型大小一致（應用到專案中的可能性小）。
方法四：給p寫死一個高度，字型大小一致（應用可能性非常小）。
方法五：給p加上樣式display：inline-block;字型大小一致；但是不要影響排版的話，還要加上width:100%;
p{width: 100%;display: inline-block;}
結：設定viewport的initial-scale=1的方法，在安卓中就像設定了<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">一樣；但是在iphone中，必須要加上width=device-width這個樣式才用效。但是方法三和方法四這兩個方法，為什麼能讓字型大小一樣，或者是說，為什麼字型大小會顯示不一樣，我就不知道了。歡迎告知原因，不勝感激！