CSS：如何消除Safari上字體大小的自動縮放

Question

注意：由於問題第一次沒有得到解決，因此我再次發布了此問題，並做了非常小的修改。 可以在以下位置找到更早的問題： CSS：在iPhone上禁用字體大小的自動縮放，但正如我所說的，它幾乎是相同的。 它有一個答案，不幸的是沒有為我澄清太多...]

正如解釋在這里，蘋果iPhone（即Safari瀏覽器）重新調整字體大小時，視口的變化（即從縱向到橫向或反之亦然）。

對於該問題的公認答案是，為了禁用此行為，應添加：

-webkit-text-size-adjust: none;

因此，我的主要問題是，為什么當我在iPhone上查看以下HTML測試文件時，與縱向視圖相比，固定大小的字體在橫向上仍呈現更大的字體：

<!doctype html>
<html>
    <head> 
        <meta charset="utf-8"> 
        <title>Untitled Document</title> 
        <style> 
            p { 
              font-size:24px;
             -webkit-text-size-adjust:none;
             } 
        </style> 
    </head>
    <body> 
        <p>This is an example text</p> 
    </body>     
</html>

（注意：在其他帖子中，我也看到“ 100％”而不是“無”，這可能是更可取的，但是區別在這里似乎無關緊要，因為兩者都不起作用。）

但是，我也想讓它確認Apple iPhone（可能還有其他Apple設備）是唯一顯示這種（對我來說，很煩人）行為的設備...是真的嗎？

順便說一句，我感到很煩，因為現在我無法在iPhone上正確測試，因為我知道我的網站（即字體大小）在其他移動設備上的呈現方式有所不同（並且我不完全信任在線模擬器）。

謝謝。

Answer 1

這顯然與您使用的字體大小有關，在此站點上，我使用以下CSS：

html, body
{
    font-size: 100%; /* equivalent to 16px */
}

對於影響手機字體的樣式表，為了方便人們，我只放置了大於16px的大小，例如

 h2
{
  font-size:1.5rem; 
  /* notice the use of rem as compared to em - I don't use px for font sizes so I don't know about that */
}

http://www.awri.com.au/research_and_development/metabolomics_facility/

僅供參考，我的中繼標記為：

<meta name="viewport" id="viewport" content="width=device-width,user-scalable=yes,initial-scale=1" />

CSS：如何消除Safari上字體大小的自動縮放

問題描述

1 個解決方案

解決方案1
0 已采納 2016-01-19 03:32:38

CSS：如何消除Safari上字體大小的自動縮放

問題描述

1 個解決方案

解決方案1 0 已采納 2016-01-19 03:32:38

解決方案1
0 已采納 2016-01-19 03:32:38