安卓4.4中的WebView和初始缩放

Question

我已经绞尽脑汁整整一天了，我需要帮助 :(

问题是，我的WebApp设计是针对640x960的。

我们没有时间为每个屏幕大小编写CSS，所以我在viewport meta标签中使用initial-scale,maximum-scale, minimum-scale将应用程序缩放到不同的屏幕大小。

问题是，在Android 4.4中，无论我做什么，它都会始终将应用程序放大，但从不缩小！

我的意思是，如果我使用值0.7，则应用程序会被放大。如果我使用值1.3，它又会被放大 :/

我已经尝试更改targetSdkVersion以获取旧行为，但没有成功。

有人能帮帮我吗？

更新： 因此，我最终在标签上使用了style="zoom: <value>%"。我根据当前设备屏幕大小与我的应用程序的分辨率之间的差异计算百分比。现在一切顺利。

- Arthur

Answer 1

视口大小为

<meta name="viewport" content="width=640, initial-scale=1">

应该使您的固定布局始终适合屏幕（请参见 MDN 了解有关视口元标记的更多信息）。

您可能会遇到以下问题：

• 内容不能缩小超过“概览比例”（也就是说，使您的内容比屏幕更窄）。这是设计上的考虑 - 缩小只会导致白色渲染到两侧，所以没有必要。如果您想要这种行为，则需要向内容添加填充，
• 您已将 WebView 的布局高度指定为 WRAP_CONTENT - 这会使 WebView 忽略视口元标记，请勿这样做 - 将其设置为 MATCH_PARENT 或固定大小，
• 您正在使用某些 WebSettings：
  • setUseWideViewport（覆盖视口元标记）或
  • setInitialScale（可以更改视口的大小）。

检查是内容的问题还是 WebView 的问题的最佳方法是查看页面在 Android 上的 Chrome 中是否可用：

1. 如果在 Android 上的 Chrome 中可以正常工作，但在 WebView 中无法正常工作，则将 targetSdkVersion 设置为 19，并尝试禁用 WebSettings、更改布局为固定大小等，以查看是什么导致了问题。也许从另一端开始 - 制作一个仅加载页面的超级简单的 WebView 应用程序 - 确认它可以正常工作，然后逐渐引入更改，以查看哪个更改导致了问题，
2. 如果在 Android 上的 Chrome 中无法正常工作，则问题在于 pre-KK WebView 和 Android 上的 Chrome 之间视口元标记支持的差异 - 这意味着您需要修复您的内容，

如果您还卡住了，请发布一个包含可重现问题的源代码的 zip 文件（不必是完整的应用程序，只需最少的演示问题即可），我可以从那里尝试帮助您更多。

- marcin.kosiba

---

我接受了你的答案，因为它是一个很好的总体解释。但是我最终在Android 4.4设备上使用了zoom: <calculated percent here>%在body标签上。我正在使用PhoneGap，而且我从来没有遇到过缩放问题，因为我根据屏幕高度和我的设计高度计算出initial-scale，然后将页面的宽度调整为100%。所以基本上我的设计总是完全适合，没有任何白边。 - Arthur

Answer 2

我曾经对此进行了一次简单的测试，因为之前自己也不太确定答案。

http://www.gauntface.co.uk/blog/2013/11/29/desktop-site-and-the-viewport/

如果只想让网页适应WebView的宽度，则需要一个没有初始缩放比例的视口。

以下是影响WebView的因素：

1. 确保启用setUseWideViewport()以便页面可以比设备的宽度更大：http://developer.android.com/reference/android/webkit/WebSettings.html#setUseWideViewPort(boolean)
2. 确保targetSDKVersion = 19，以确保不会出现旧版WebView的兼容性问题

如果您想防止用户缩放，请在视口中使用user-scalable=no，而不是设置最小和最大值。

- Matt Gaunt

---

不，我不需要调整视图的大小。我需要整个应用程序进行缩放（包括图像、按钮等）。使用style="zoom: 80%"，其中我将80%替换为计算出的值即可解决问题。 - Arthur

我知道有些人在使用缩放功能时会遇到问题（瓷砖之间出现一些不寻常的白色空间）。transform: scale(2,2)很想看看缩放功能与视口相比会产生什么样的效果，能否提供一些截图？ - Matt Gaunt

你是如何实现缩放的？你能给我们提供你使用的脚本吗？ - Sithys