android - 为什么 SenchaTouch 2 中使用的图像比正常尺寸大 1/3？

Question

我正在使用 SenchaTouch2 开发 Android 应用程序。我使用一个 480px 宽的 png 文件作为背景图像以适应 GalaxySII，它有 480px 宽度。它在浏览器中非常好，但在我导出为 native 应用程序后，背景变得更大并且超出了可视范围。

经过一些观察，如果我想适应 480px 的屏幕，你的原始图像应该是 320px，这是 1/3 的差异。请让我知道谁可以设法显示原始宽度 n 高度的背景。

谢谢!

Answer 1

听起来您的 WebView 正在执行缩放。也就是说，默认比例 1.0 等于一个 mdpi 设备。 Galaxy SII 是 hdpi 设备，比例为 1.5。因此，您的 480 像素图像正在变为 480 像素 * 1.5 或 720 像素，以及为什么 320 像素看起来像您想要的。

尝试像这样指定视口(viewport)使用设备的 native DPI:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width"/>

或者，您可以将其指定为:

<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0"/>

您可以在以下位置阅读有关设置视口(viewport)以针对 Android 设备的更多信息:http://developer.android.com/guide/webapps/targeting.html

请注意，如果您随后遇到字体问题，则需要按照我对 font size different on ios and android 的回答中的步骤进行操作。

另请注意，对于 Sencha Touch 2，他们似乎关闭了此自动视口(viewport)设置:http://www.sencha.com/forum/showthread.php?184219-Viewport-Meta-Tags-not-injected-automatically