帶視口的iOS上的字體大小

Question

我只是不知道這一點。

我正在構建一個html游戲，iPhone4中的所有游戲字體都比PC瀏覽器（Chrome）中的字體大。

我在html上使用了這個標簽：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />

使用“ -webkit-text-size-adjust：none;”按鈕中的字體大小設置為4em。 整個CSS屬性。

我知道這與像素密度和iPhone分辨率有關，但是我嘗試了所有操作，但無法使它們看起來都一樣。

如果我刪除html視口標記，則字體最終看起來會比原本應該的小得多。

謝謝。

Answer 1

您是否有適當的媒體查詢？ 移動設備上的4em很大，在移動網站上我通常不會超過1.2-5 em。

將此添加到您的CSS

@media only screen and (min-width: 1px) and (max-width:590px){

    /*what ever the element is*/{
    font-size: 1em;
    }

    }

Answer 2

您可以嘗試使用視口高度作為字體大小。

font-size: 5vh;

它將根據視口（窗口）的高度縮放文本，因此應在瀏覽器和移動設備之間正確縮放。