【教學】如何避免文字字體在手機chrome瀏覽器中被放大

使用手機的Chorme瀏覽器觀看文章時,如果某一個段落的長度較長,手機的Chorme瀏覽器會自動將該段落的字體放大,這個特性稱為「Text Autosizer」。以網頁設計者的角度,如果沒有處理這個問題,可能會造成設計好的網頁樣式在手機瀏覽器呈現出不是設計者想呈現的樣式。

如果想要設定文字不被自動放大的話,可以在<p>標籤或是<div>標籤中加上「style="max-height:100%;"」,也就是說變成<p style="max-height:100%;">和<div style="max-height:100%;>

以下是一個實際例子:

※ 第一個段落,沒有加「style="max-height:100%;"」

完成任務「莫古利商店極密開店」之後開啟莫古利商店,可以用莫古利獎牌兌換各種物品,包含唱片「20. Gold Saucer」、艾莉絲武器「銀製長杖」、配件「疾風領巾」、配件「救贖徽章」、任務道具「墓地鑰匙」、以及四名角色的技能升級書各一本。全部兌換需要28個莫古利獎牌,如果不夠的話可以玩旁邊的箱子破壞王小遊戲,參加獎為1個莫古利獎牌,可以重複刷。銀製長杖是艾莉絲很常用的武器,疾風領巾也是打小怪很常用的配件。

※ 同樣的段落,加上「style="max-height:100%;"」

完成任務「莫古利商店極密開店」之後開啟莫古利商店,可以用莫古利獎牌兌換各種物品,包含唱片「20. Gold Saucer」、艾莉絲武器「銀製長杖」、配件「疾風領巾」、配件「救贖徽章」、任務道具「墓地鑰匙」、以及四名角色的技能升級書各一本。全部兌換需要28個莫古利獎牌,如果不夠的話可以玩旁邊的箱子破壞王小遊戲,參加獎為1個莫古利獎牌,可以重複刷。銀製長杖是艾莉絲很常用的武器,疾風領巾也是打小怪很常用的配件。

以上兩個段落在電腦的Chrome瀏覽器上觀看字體是相同的,但是在手機的Chorme瀏覽器上觀看時就會不同。第一個段落沒有加上「style="max-height:100%;"」,在手機的Chorme瀏覽器上觀看時,就會自動被放大字體。事實上本篇文章的所有段落,在手機的Chorme瀏覽器上全都會被判定為需要放大字體,所以看起來就會是只有加上「style="max-height:100%;"」的這個段落字體比較小。

 

下一篇文章:
沒有留言:
張貼留言