我正在开发一个 webApp，它应该调整到设备可能拥有的任何屏幕尺寸。在 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) 上它不起作用。左右两边大概有20px的空间，不知道他为什么要这样。
我的视口(viewport)标签如下所示:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
无论我如何更改标签，空格始终存在并且内容不适合屏幕。
我制作了一个示例页面来向您展示效果:http://easyeve.w3y.de/link/index.html
如果您在 iPhone 上打开此链接，内容完全适合(您不会看到任何黄色 = 正文)并且文档宽度为 320 像素。在 Galaxy Nexus 上，您会看到黄色空间，文档宽度为 360 像素(恰好是显示分辨率的一半)。这也应该是 320px!
您是否也遇到了这个问题，有什么办法可以解决吗？
更新:我在 Galaxy Note/Android 2.3.6 上注意到同样的问题 因此这不是 Android 4 的问题。我猜这与大屏幕尺寸有关..
最佳答案
同样的问题(Galaxy Nexus - Android 4.0.2)，我说的是默认浏览器中的常规网页
设置视口(viewport)元 initial-scale 小于 1(缩小)似乎被浏览器忽略。高于 1 的值(放大)效果很好。
浏览器中有一些设置(设置->高级)，您可以在其中更改内容:
- 默认缩放 - 它有所不同，但不能解决问题
- 自动调整页面 - 对我来说没有区别
一切似乎在 Chrome 浏览器(目前为测试版)中运行得非常完美，但这不是 ICS/Galaxy Nexus 的默认浏览器。
更新(解决方案):
在 Galaxy Nexus 上设置元视口(viewport)“width=device-width”失败。
设置 viewport "width=1280"效果很好(1280px 是 galaxy nexus 屏幕的宽度)。
注意设置“width=1280,user-scalable=no”会再次破坏它(即使有 user-scalable=no 也可以缩小):(
关于android - 为什么 Galaxy Nexus/Android 4 上的视口(viewport)标签不起作用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9374611/