为什么 Galaxy Nexus / Android 4 上的视口标签不起作用？
我正在开发一个网络应用程序，它应该调整到设备可能具有的任何屏幕尺寸。在 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 的问题。我猜这与大屏幕尺寸有关。
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这里有同样的问题（Galaxy Nexus - Android 4.0.2），我正在谈论默认浏览器中的常规网页
设置视口元初始比例小于1（缩小）似乎被浏览器忽略。大于 1（放大）的值可以正常工作。
浏览器中有一些设置（设置 -> 高级），您可以在其中进行更改：
一切似乎在 Chrome 浏览器（目前为测试版）中工作得非常完美，但这不是 ICS / Galaxy Nexus 的默认浏览器。
更新（解决方案）：
在 Galaxy Nexus 上设置元视口“width=device-width”失败。
设置视口“width=1280”效果很好（1280px是 Galaxy Nexus 屏幕的宽度）。
请注意，设置“width=1280，user-scalable=no”会再次破坏它（即使有user-scalable=no，您也可以缩小）:(
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
我在 Galaxy Tab 2 上遇到了一些类似的情况。为应用程序设置 WebSettings 时，尝试设置 webViewSettings.setUseWideViewPort(true);这将迫使 Android 考虑视口元标记。在我的应用程序的 Galaxy Tab 2 中，它被忽略了，并且视口中的所有内容都绘制不正确，直到我更改了此设置。
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
今天我终于被这个问题困扰了。我的问题有点复杂，因为除了基本 CSS 之外，我还必须处理 Wordpress 样式表（来自另一个主题）。 Chrome 在我的手机和平板电脑上运行得很好，而且自带的浏览器在平板电脑上也运行得很好。然而，股票浏览器不断缩小并向我显示桌面视图。两边都没有边距，这是正确的行为，但浏览器应该从我的侧边栏和内容 div 中删除浮动并放大到主要内容（我正在使用 @media 查询）。尽管听起来很奇怪，但我实际上通过首先将“缩放”设置设置为“远”并刷新，然后将“缩放”重置为“中”并刷新来解决此问题。
我应该指出，当我查看您页面的 HTML 和 CSS 时，我注意到您为页面 div 设置了特定的像素宽度。我很确定您需要使用百分比来代替宽度。例如，我的居中内容 div 具有
margin: 0 auto;、min-width:320px;、max-width:900px;和宽度：100%；。I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using @media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has
margin: 0 auto;,min-width:320px;,max-width:900px;, andwidth:100%;.