带视口的iOS上的字体大小

Question

我无法解决这个问题。

我构建了一个html游戏，iPhone4中的所有游戏字体都比我的电脑浏览器（Chrome）更大。

我在html上使用此标记：

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

按钮中的字体大小设置为4em，＆＃34; -webkit-text-size-adjust：none;＆＃34;整个身体的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;

它将根据视口（窗口）的高度缩放文本，因此它应该在浏览器和移动设备之间正确缩放。