手機瀏覽pc網頁,字型顯示比樣式中設定的字型更大

2021-08-07 13:16:19 字數 1699 閱讀 9148

用手機訪問專案的乙個內容頁時,正文的字型比邊欄的字型要大,但是樣式中他們的font-size大小是一樣的。其中的**片段如下

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的高度,不知道是怎麼計算出來的。如圖

於是就慢慢地去除錯吧:

方法二:給header裡面加上meta,安卓下字型都是一樣大的(我的魅族下是這樣),而且p的高度也是正常計算出來的;但是蘋果不買單,還是一大一小,安卓下遠端除錯如圖:

方法三:把p的父類div的寬度樣式去掉(即預設的100%) ,字型大小一致(應用到專案中的可能性小)。

方法四:給p寫死乙個高度,字型大小一致(應用可能性非常小)。

方法五:給p加上樣式display:inline-block;字型大小一致;但是不要影響排版的話,還要加上width:100%;

p
結:設定viewport的initial-scale=1的方法,在安卓中就像設定了一樣;但是在iphone中,必須要加上width=device-width這個樣式才用效。但是方法三和方法四這兩個方法,為什麼能讓字型大小一樣,或者是說,為什麼字型大小會顯示不一樣,我就不知道了。歡迎告知原因,不勝感激!

pc瀏覽器模擬手機瀏覽器

很多 都通過user agent來判斷瀏覽器型別,如果是3g手機,顯示手機頁面內容,如果是普通瀏覽器,顯示普通網頁內容 谷歌chrome瀏覽器,可以很方便地用來當3g手機模擬器。在windows的 開始 執行 中輸入以下命令,啟動 谷歌瀏覽器,即可模擬相應手機的瀏覽器去訪問3g手機網頁 谷歌andr...

pc端網頁自適應顯示在移動端

當我們將乙個pc端的網頁放到移動端的時候,移動端瀏覽器會將pc端的網頁按照一定的比例完整的顯示出來,這是因為移動端的瀏覽器預設的會將網頁渲染在乙個比例比較大的viewport中排版 ios預設的是980px,android4.0以上為980px 然後通過比例縮放看到整個頁面的全貌。但是,使用預設的v...

想在dialog裡顯示或者瀏覽網頁嗎?

call browser 應用 原始碼摘錄 call function call browser exporting url l str url window name new window x browser type contextstring exceptions frontend not s...