Почему тег viewport на Galaxy Nexus/Android 4 не работает?

Я работаю над webApp, который должен быть изменен до любого размера экрана, которое может иметь устройство. В iOS и более старых версиях Android тег viewport отлично работает. Изображение на экране всегда изменяется в соответствии с экраном.
(Как описано здесь: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
На Galaxy Nexus (Android 4.0) это не сработает. С левой и правой стороны - около 20 пикселей пространства, и я не знаю, почему он это делает. Мой тег viewport выглядит следующим образом:

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

Независимо от того, что я меняю по тегу, пространство всегда есть, и содержимое не подходит для экрана. Я сделал образец страницы, чтобы показать вам эффект: http://easyeve.w3y.de/link/index.html
Если вы откроете эту ссылку на iPhone, то контент отлично подойдет (вы не увидите ничего желтого = тело), ​​а ширина документа - 320 пикселей. На Galaxy Nexus вы увидите желтое пространство, а ширина документа - 360 пикселей (что составляет ровно половину разрешения экрана). Это тоже должно быть 320 пикселей! У вас тоже есть эта проблема, и есть ли способ ее исправить?

Обновление: я заметил ту же проблему в Galaxy Note/Android 2.3.6 Поэтому это не проблема Android 4. Это связано с большим размером экрана, я думаю.

ОТВЕТЫ

Ответ 1

Сама же проблема (Galaxy Nexus - Android 4.0.2), я говорю о обычной веб-странице в браузере по умолчанию

Настройка viewport meta начальная шкала меньше 1 (уменьшение), кажется, игнорируется браузером. Более высокие значения, чем 1 (увеличение) работают нормально.

В браузере есть настройки (settings- > advanced), где вы можете изменить:

  • Усиление по умолчанию - это имеет значение, но оно не устраняет проблему.
  • Страницы с автоматической установкой - в моем случае не имеет значения

Кажется, что все работает в браузере Chrome (бета на данный момент), но это браузер не по умолчанию для ICS/Galaxy Nexus.

ОБНОВЛЕНИЕ (решение):

Настройка Galaxy Nexus для метаданных "width = device-width" не работает. Настройка viewport "width = 1280" работает просто отлично (1280px - это ширина экрана галактики nexus).

Помните, что установка "width = 1280, user-scaleable = no" снова разрывает его (вы можете уменьшить масштаб, даже если есть масштабируемый пользователь = нет): (

Ответ 2

Я столкнулся с чем-то похожим на вкладке Galaxy 2. При настройке своих настроек WebSettings для апплета попробуйте установить webViewSettings.setUseWideViewPort(true); Это заставит Android рассмотреть метатег просмотра. Это игнорировалось в случае Galaxy Tab 2 для моего приложения, и все, что отображалось в окне просмотра, неправильно отображалось, пока я не изменил это.

Ответ 3

Сегодня я столкнулся с этой проблемой. Моя проблема была немного сложнее, потому что мне пришлось иметь дело с таблицей стилей Wordpress (из другой темы) в дополнение к базовому CSS. Chrome отлично работал на моем телефоне и планшете, и браузер для браузера отлично работал на планшете. Тем не менее, браузер обозревателя продолжал увеличивать масштаб и показывать мне рабочий стол. На обеих сторонах не было полей, что было правильным поведением, но браузер должен был удалить поплавки с боковой панели и разделов контента и увеличить его до основного содержимого (я использую запросы @media). Как ни странно, я действительно исправил это, предварительно установив параметр "Масштаб" на "Дальний", обновив, а затем сбросив масштаб на "Средний" и обновив его.

Я должен указать, что когда я смотрел ваши страницы HTML и CSS, я заметил, что вы задали определенную ширину пикселя для своего div. Я уверен, что вам нужно использовать проценты для ширины. Например, мое сосредоточенное содержимое div имеет margin: 0 auto;, min-width:320px;, max-width:900px; и width:100%;.