修復我網站中不同瀏覽器的文本大小不一致問題，特別是移動瀏覽器（嘗試過 reset.css 和多種字體格式）

Question

問題：

盡管使用了相同的代碼，但文本在我網站的不同頁面上以不同的大小顯示。 這特別影響移動瀏覽器。 例如，我的文本在 Firefox 桌面版中的大小適當，但是，在 Firefox 移動版中，文本是應有的 200%，但僅限於少數特定頁面，而其他頁面顯示得很好。 “顯示桌面站點”滑塊似乎不會影響該問題。 某些移動瀏覽器顯示一切正常，例如三星的默認瀏覽器。

我試過的：

一些答案建議使用 reset.css ( https://meyerweb.com/eric/tools/css/reset/ )，但我真的找不到任何人對如何實現這一點的解釋，所以我只是假設我應該在我的 html 中聲明 reset.css 作為我的 css，然后聲明我的實際 css 來覆蓋它。 如果這不是如何實現這一點，請具體告訴我。 圍繞這個問題的每一次討論似乎都只是說“每個站點的實現都不同”，而沒有說任何具體的內容。

我也嘗試過聲明多種字體格式以獲得最大兼容性，但是，它並沒有真正的幫助。 我正在使用 WOFF、TFF 和 SVG。 這是我的@font-face css 的樣子：

 @font-face { font-family: 'main_font'; src: url('fonts/SpecialElite-Regular.eot'); src: local('☺'), url('fonts/SpecialElite-Regular.woff') format('woff'), url('fonts/SpecialElite-Regular.ttf') format('truetype'), url('fonts/SpecialElite-Regular.svg') format('svg'); font-weight: normal; font-style: normal; }

例子：

這是頁面上的 Firefox Mobile 顯示正確：

這是另一個頁面上的 Firefox Mobile，它使用相同的代碼，但顯示更大的文本：

這是正常工作的頁面的 html 片段：

 <div id="container"> <div id="c">~ Filters ~<br><a href="art.html?filter=All"> All </a> ~ <a href="art.html?filter=New"> New </a> ~ <a href="art.html?filter=1920x1080Wallpaper"> 1920 x 1080 Wallpaper </a> ~ <a href="art.html?filter=1080x1920Wallpaper"> 1080 x 1920 Wallpaper </a> ~ <a href="art.html?filter=Glitch"> Glitch </a><br><a href="art.html?filter=Cartoon"> Cartoon </a> ~ <a href="art.html?filter=Pixel"> Pixel </a> ~ <a href="art.html?filter=PencilArt"> Pencil Art </a> ~ <a href="art.html?filter=Paper"> Paper </a> ~ <a href="art.html?filter=3D"> 3D </a> </div> </div>

這是顯示較大文本的頁面的代碼：

 <div id="container"> <div id="c">~ Filters ~<br><a href="textures.html?filter=All">All</a> ~ <a href="textures.html?filter=New">New</a> ~ <a href="textures.html?filter=Organic">Organic</a> ~ <a href="textures.html?filter=Stone">Stone</a> ~ <a href="textures.html?filter=Dirt">Dirt</a> ~ <a href="textures.html?filter=Food">Food</a> ~ <a href="textures.html?filter=Water">Water</a> ~ <a href="textures.html?filter=Mold">Mold</a> ~ <a href="textures.html?filter=Plastic">Plastic</a> ~ <a href="textures.html?filter=Wood">Wood</a><br><a href="textures.html?filter=Alpha">Alpha</a> ~ <a href="textures.html?filter=Smears">Smears</a> ~ <a href="textures.html?filter=Plant">Plant</a> ~ <a href="textures.html?filter=Technology"> Technology </a> ~ <a href="textures.html?filter=Paper">Paper</a> ~ <a href="textures.html?filter=Repeating">Repeating</a> ~ <a href="textures.html?filter=Books">Books</a> ~ <a href="textures.html?filter=Metal">Metal</a></div> </div>

兩個代碼片段均取自桌面而非移動設備上的檢查元素，因為我不知道如何在移動設備上檢查元素。 此代碼也是通過使用文檔對象模型方法在“window.onload”上運行的 javascript 生成的。 如果我需要發布 javascript，請告訴我，但它在移動設備和桌面上輸出不同的 html 沒有任何意義。 如果你想用檢查元素挖掘自己，網址是：

在移動設備上正常工作： https : //zanzindorf.com/art.html

移動設備上的大文本： https : //zanzindorf.com/textures.html

謝謝您的幫助！

Answer 1

發現問題：“字體提升”

對於某些瀏覽器而言，這顯然是一項自動功能，可在某些條件下調整文本大小。

解決方案：將此行添加到 CSS 中的相應部分：

 -webkit-text-size-adjust: none;

世界現在更有意義了:)