iOS和Android上字体大小不同

Question

在Android上的webview中，我加载了一个包含HTML5画布的html文件。但是，在向画布写入文本时，文本非常小。如果我在PC浏览器甚至是iOS上的web视图中加载相同的html文件，则看起来是正确的。据我所知，我已禁用缩放，并且画布填充整个web视图。我希望字体大小与在其他浏览器中加载时一样。有什么想法吗？

在html文件头部，viewport声明为：

<meta name='viewport' content='target-densitydpi=device-dpi,initial-scale=1.0,user-scalable=no'/>

在html文件的body中，canvas被声明为：

<canvas id='rtmc_canvas' style='position:relative; left:0px; top:0px;'/>

在页面加载后，我会动态调整画布大小以填满屏幕。

- Kevin Westwood

Answer 1

您在声明视口时将密度设置为1.0，并告诉Android的WebView不对任何内容进行缩放。您可以删除该视口声明，这将导致图像和字体都被缩放，也可以根据用户运行应用程序的Android设备修改WebView的文本大小设置。我假设您想要进行后者。

首先，您需要计算设备的密度。您可以使用以下代码来完成：

float density = getResources().getDisplayMetrics().density;

然后您可以调整字体大小以适应密度。

如果密度为1.0，则为中等密度（mdpi），≥1.5为高密度（hdpi），≥2.0为超高密度（xhdpi）。

如果您正在使用ICS，则它有一个很好的WebView API：

webView.getSettings().setTextZoom(100 * density);

如果您使用的是ICS之前的设备，则需要使用if / else语句检查上述密度，然后使用以下方法：

if (density < 1.5) {
    // mdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.NORMAL);
} else if ((density >= 1.5) && (density < 2.0)) {
    // hdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.LARGER);
} else {
    // xhdpi:
    webView.getSettings().setTextSize(WebSettings.TextSize.LARGEST);
}

或者更好的方法是，通过检查Build.VERSION.SDK_INT，将两者都包装在ICS / else pre-ICS中。

这里有一些关于密度的进一步阅读：http://developer.android.com/guide/practices/screens_support.html

- louielouie