為什么Galaxy Nexus / Android 4上的視口標簽不起作用？

Question

我正在開發一個應該調整到設備可能具有的任何屏幕尺寸的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空間，我不知道他為什么這樣做。 我的viewport標記如下所示：

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

無論我對標簽做了什么改變，空間總是存在，內容不適合屏幕。 我已經制作了一個示例頁面來向您展示效果： http ： //easyeve.w3y.de/link/index.html
如果您在iPhone上打開此鏈接，內容完全適合（您將看不到任何黃色=正文），文檔寬度為320px。 在Galaxy Nexus上，您將看到黃色空間，文檔寬度為360px（正好是顯示分辨率的一半）。 這也應該是320px！ 你有這個問題，還有辦法解決嗎？

更新：我在Galaxy Note / Android 2.3.6上發現了同樣的問題因此它不是Android 4的問題。 它與我猜的大屏幕尺寸有關..

Answer 1

同樣的問題（Galaxy Nexus - Android 4.0.2），我在談論默認瀏覽器中的常規網頁

瀏覽器似乎忽略了將viewport meta initial-scale設置為小於1（縮小） 。 高於1的值（放大）工作正常。

瀏覽器中有一些設置（設置 - >高級），您可以在其中進行更改：

1. 默認縮放 - 它有所不同，但它不能解決問題
2. 自動調整頁面 - 在我的情況下沒有區別

一切似乎都在Chrome瀏覽器中完美運行（目前為測試版），但這不是 ICS / Galaxy Nexus的默認瀏覽器。

更新（解決方案）：

在Galaxy Nexus上設置元視口“width = device-width”失敗。
設置視口“width = 1280”效果很好 （1280px是galaxy nexus屏幕的寬度）。

請注意，設置“width = 1280，user-scalable = no”會再次打破它（即使有用戶可伸縮=否，你也可以縮小）:(

Answer 2

我在Galaxy Tab 2上碰到了類似的東西。在為applcation設置WebSettings時，嘗試設置webViewSettings.setUseWideViewPort（true）; 這將迫使Android考慮視口元標記。 對於我的應用程序，Galaxy Tab 2的情況被忽略，視口中的所有內容都被錯誤地繪制，直到我更改了它。

Answer 3

我今天最終糾纏於這個問題。 我的問題有點復雜，因為除了基本CSS之外我還必須處理Wordpress樣式表（來自另一個主題）。 Chrome在我的手機和平板電腦上完美運行，平板瀏覽器也在平板電腦上運行良好。 但是，股票瀏覽器不斷縮小並向我顯示桌面視圖。 兩邊都沒有邊距，這是正確的行為，但瀏覽器應該從我的側邊欄和內容div中刪除浮動並放大到主要內容（我正在使用@media查詢）。 聽起來很奇怪，我實際上通過首先將“縮放”設置設置為“遠”，“刷新”，然后將“縮放”重置為“中”並刷新來修復此問題。

我應該指出，當我查看您的頁面的HTML和CSS時，我注意到您為頁面div設置了特定的像素寬度。 我很確定你需要使用百分比代替寬度。 例如，我的居中內容div有margin: 0 auto; ， min-width:320px; ， max-width:900px; ， width:100%; 。