为什么Galaxy Nexus/Android 4上的视口标签无法正常工作？

Question

我正在开发一个 Web 应用程序，应该能够适应任何设备可能拥有的屏幕大小。在 iOS 和旧版 Android 上，viewport 标签的效果很好。屏幕上的图片始终会被缩放以适应屏幕大小。
（就像这里所描述的那样：https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19）
但是在 Galaxy Nexus（Android 4.0）上，它无法正常工作。左右两侧各有大约 20 像素的空间，我不知道为什么会出现这种情况。
我的 viewport 标签如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

无论我如何更改标签，这个空间总是存在的，而且内容无法适应屏幕。 我制作了一个示例页面来展示效果：http://easyeve.w3y.de/link/index.html。 如果你在iPhone上打开此链接，内容完全适合（你看不到任何黄色= body），文档宽度为320px。 在Galaxy Nexus上，您将看到黄色空间，文档宽度为360px（正好是显示分辨率的一半）。 这也应该是320px！ 你也有这个问题吗？有没有什么方法可以修复它？ 更新：我注意到在Galaxy Note / Android 2.3.6上也有同样的问题，因此这不是Android 4的问题。 我猜这与大屏幕尺寸有关。

- evschlkn

Answer 1

在这里遇到了同样的问题（Galaxy Nexus - Android 4.0.2），我指的是默认浏览器中的常规网页。设置viewport meta的初始缩放比小于1（缩小）似乎被浏览器忽略了。大于1的值（放大）可以正常工作。在浏览器中有一些设置（设置->高级），您可以更改以下内容：

1. 默认缩放比-它确实有所不同，但无法解决问题 2. 自适应页面-在我的情况下没有任何区别

在Chrome浏览器中一切都似乎非常完美（目前为止是beta版），但那不是ICS / Galaxy Nexus的默认浏览器。

更新（解决方案）：

在Galaxy Nexus上，设置meta viewport“width = device-width”会失败。设置viewport“width = 1280”效果很好（1280px是Galaxy Nexus屏幕的宽度）。

请注意，设置“width = 1280，user-scalable = no”会再次破坏它（即使有user-scalable = no，您仍然可以缩小）。

- Petr Urban

---

谢谢您的回答，但对我来说不起作用。 我将我的视口标签更改为width=1280，但这只会导致我的网站非常大（就像桌面视图），但缩放到左上角。我已经更改了我的代码： 链接 - evschlkn

Answer 2

我在Galaxy Tab 2上遇到了类似的问题。在设置应用程序的WebSettings时，请尝试设置webViewSettings.setUseWideViewPort(true)。这将强制Android考虑viewport meta标记。在我的应用程序中，Galaxy Tab 2忽略了它，并且视口中的所有内容都绘制不正确，直到我更改了这个设置。

- Dan

Answer 3

今天我遇到了这个问题。我的问题有点复杂，因为我不仅要处理基本的CSS，还要处理来自另一个主题的Wordpress样式表。Chrome在我的手机和平板电脑上完美地工作，而股票浏览器在平板电脑上也很好用。然而，股票浏览器一直在缩小并显示桌面视图。两侧都没有边距，这是正确的行为，但浏览器应该从我的侧边栏和内容div中删除浮动，并放大到主要内容（我正在使用@media查询）。听起来很奇怪，但我实际上是通过首先将缩放设置为Far，刷新，然后将缩放重置为Medium并刷新来修复这个问题的。

我应该指出的是，当我查看您页面的HTML和CSS时，我注意到您为页面div设置了特定的像素宽度。我相当确定您需要使用百分比来设置宽度。例如，我的居中内容div具有margin: 0 auto;、min-width:320px;、max-width:900px;和width:100%。

- Gemini14

---

谢谢。你说得对，如果我把所有的宽度都设置为百分比，它可能会起作用，但这不是我想要的。我不想要一个流体设计。 - evschlkn