ios - 如何使我的字体大小在各种设备上看起来不错？ UIWebView 中 iPad 和 iPhone 的不同视口(viewport)

Question

我有一个包含大量文本和几张图片(如新闻文章)的页面，我希望以适合平板电脑大小的设备和手机大小的设备的方式显示它们。

我现在要做的是使 Scale to Fit = YES 并让我的 html 具有元标记

<meta name='viewport' content='initial-scale=1.0, maximum-scale=10.0'/>

但是 iPad 上的字体实在是太小了。我试图通过设置 initial-scale=2.0 来解决它，但现在它在 iPhone 甚至 Galaxy 平板电脑上看起来都很大。

如何处理不同的设备尺寸并让字体大小在设备上看起来都很好？

也许一个更好的问题是如何在放大后再次制作 UIWebView 换行文本？

Answer 1

我会将比例保持在 1.0 不变，但一旦大屏幕上有更多可用空间，就增加文本大小。您可以使用 css 媒体查询来实现这一点:

@media screen and (min-width : 768px) {
    /* Styles, for example to increase font size */
    body { font-size: 120%; }
}

当在屏幕宽度 > 768(iPad 纵向宽度)的设备上显示时，这会将正文字体大小增加到 120%。当然，您可以将这些规则中的多个用于不同的宽度。

W3有官方Media Queries规范。