为什么 Galaxy Nexus / Android 4 上的视口标签不起作用？答案

【问题标题】：Why is the viewport tag on the Galaxy Nexus / Android 4 not working?为什么 Galaxy Nexus / Android 4 上的视口标签不起作用？
【发布时间】：2012-03-11 14:08:44
【问题描述】：

我正在开发一个 webApp，它应该可以调整到设备可能具有的任何屏幕尺寸。在 iOS 和较早的 android 版本上，视口标签可以正常工作。屏幕上的图片始终调整大小以适合屏幕。
（如此处所述：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的空间，我不知道他为什么这样做。我的视口标签如下所示：

<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 的问题。我猜这与大屏幕尺寸有关..

【问题讨论】：

标签： android resize viewport

【解决方案1】：

同样的问题（Galaxy Nexus - Android 4.0.2），我说的是默认浏览器中的常规网页

设置视口元 initial-scale 小于 1（缩小）似乎被浏览器忽略。大于 1（放大）的值可以正常工作。

浏览器中有一些设置（设置->高级），您可以在其中进行更改：

默认缩放 - 有所不同，但不能解决问题
自动调整页面 - 在我的情况下没有区别

在 Chrome 浏览器（目前为测试版）中，一切似乎都完美无缺，但这不是 ICS / Galaxy Nexus 的默认浏览器。

更新（解决方案）：

在 Galaxy Nexus 上设置元视口“width=device-width”失败。
设置 viewport "width=1280" 效果很好（1280px 是galaxy nexus 屏幕的宽度）。

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

【讨论】：

感谢您的回答，但它对我不起作用:(我将视口标签更改为 width=1280 但这只是导致我的网站非常大（像桌面视图）但放大到左角..我已经更改了我的代码：link

【解决方案2】：

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

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

【讨论】：

谢谢。没错，如果我将所有宽度都设置为百分比，它可能会起作用，但这不是我想要的。我不想要液体设计..

【解决方案3】：

我在 Galaxy Tab 2 上遇到了一些类似的问题。在为应用程序设置 WebSettings 时，尝试设置 webViewSettings.setUseWideViewPort(true);这将迫使 Android 考虑视口元标记。在我的应用程序的 Galaxy Tab 2 的情况下，它被忽略了，并且在我更改之前，视口中的所有内容都绘制不正确。

【讨论】：