在具有各种物理尺寸和分辨率的各种设备上运行带有 Web 视图的 Android 应用程序答案

【问题标题】：Running Android app with web view on various devices with various physical sizes and resolutions在具有各种物理尺寸和分辨率的各种设备上运行带有 Web 视图的 Android 应用程序
【发布时间】：2014-01-14 15:09:16
【问题描述】：

我在 10" 平板电脑上以横向模式运行 Android 应用程序，分辨率为 1280x800 像素。应用程序包含网页视图，包括 1280x720 像素大小的图片，因此它是一种全屏网页视图。
如果我在 HTC One X 智能手机上运行相同的应用程序，它是 4.7 英寸，720 x 1280 像素，也是横向模式，网页视图似乎只显示图片的一部分，比我预期的要少得多。它甚至看起来像物理原件的 1/4，左上四分之一。
有没有人有过以完全不同的物理屏幕尺寸在相似甚至不同的分辨率上运行相同的应用程序的经验？有什么建议吗？
例如，我想在分辨率仅为 1024x600 像素的 7 英寸平板电脑上也运行此应用。我还可以在不需要更改图片大小的情况下这样做吗？

【问题讨论】：

标签： java android screen-resolution hybrid-mobile-app

【解决方案1】：

这只是一般的网页视图/网页的行为。除非您使用 JavaScript 或 css 告诉它，否则它不会关心您的屏幕有多大，并且会以指定的确切像素大小显示所有内容。您很可能使用 JavaScript 或 css 动态调整图像大小。

这可能就是你要找的：How can I resize an image dynamically with CSS as the browser width/height changes?

【讨论】：

好的，作为第一个测试，我制作了一个简单的应用程序，其中一个 webview 在 html 页面中显示 1280 x 720 px 的图像。它在 10" 1280 x 800 GTab2 上看起来是正确的。否则，在 7" GTAB2 1024*600 或 HTC One X、1280 * 720 上，我必须向右和向下滚动才能看到其余部分。但是，如果我从 Chrome 或本机浏览器（都在 HTC One X 上）运行相同的 html 页面，图像会正确显示。所以现在，我的问题是，我的网络视图有什么问题或者我缺少什么设置？
我已经到了在显示图像的 html 页面中使用 viewport 元标记的地步，所以希望我能得到最终的解决方案。
好的，无论我对元标记视口设置做什么，webview 中的网页总是放大显示。然后我可以双击缩小以根据需要查看整个页面。我不知道如何实现缩小启动。我猜双击是 Android 触摸监听器的问题。

【解决方案2】：

根据这个帖子：
Android Webview initial zoom out

这是正确的答案：

webview.getSettings().setLoadWithOverviewMode(true);

这将导致 webview 最初被缩小。

webview.getSettings().setUseWideViewPort(true);

Webview 将有一个普通的视口（如桌面浏览器），

【讨论】：

【解决方案3】：

您可以为每个密度创建单独的样式表。

http://developer.android.com/guide/webapps/targeting.html#DensityCSS

【讨论】：

【解决方案4】：

总结一下，所有更改都必须在 html、js 和 css 中的门户端完成，以便在各种平板电脑上正确显示。

在这种情况下，使用 WebView 元素的设置没有帮助。

【讨论】：