为什么在Galaxy Nexus的/安卓4.0视口标签不工作？ [英] Why is the viewport tag on the Galaxy Nexus / Android 4 not working?

问题描述

我工作的一个Web应用程序应该调整到任何屏幕大小的设备可能有。在iOS和Android的较旧版本的视标签工作正常。屏幕上的画面总是调整大小以适应屏幕。
（像这里描述的：<一href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19">https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
在Galaxy Nexus的（安卓4.0）将无法正常工作。在左侧，右侧约20像素的空间，我不知道为什么他这样做。 我视口的标签是这样的：

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/ios/#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"/>

不管是什么我改一下标签，空间是永远存在的，内容不适合屏幕。 我做了一个示例页面向您展示的效果： http://easyeve.w3y.de/link/index.html
如果你打开​​iPhone上的这个环节的内容完全吻合（你不会看到任何黄色=体），该文件宽度为320px的。在Galaxy Nexus的，你会看到黄色的空间和文档宽度为360px（这也正是一半的显示分辨率）。这应该是320px的呢！ 你是否有这样的问题太多，是有办法解决它？

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?

更新：我已经注意到了Galaxy Note的同样的问题/安卓2.3.6 因此，它不是一个Android 4的问题。它做的大屏幕大小我想..

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..

推荐答案

这里的同样的问题（Galaxy Nexus的 - 安卓4.0.2），我说的是常规Web页面中的默认浏览器

The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser

设置视元初始规模小于1（缩小）似乎是由浏览器忽略。较高的值大于1（放大式）工作正常。

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:

1. 在默认缩放 - 它使差异，但它并没有解决这个问题
2. 自动调整页面 - 在我的情况没有什么区别

一切似乎工作只是完美的Chrome浏览器（测试版目前），但是这是不可以默认浏览器ICS / Galaxy Nexus的。

Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.

UPDATE（解决方案）：

设置荟萃视宽度=设备宽度失败的Galaxy Nexus的。
设置视口宽1280的作品好了（1280px的宽度Galaxy Nexus的屏幕的）。

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).

要注意的是设置宽1280，用户可扩展=无再次打破它（你可以缩小即使是用户可扩展性=无）：（

Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(

这篇关于为什么在Galaxy Nexus的/安卓4.0视口标签不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！