Android WebView, похоже, игнорирует информацию о «окне просмотра» на веб-страницах

Question

У меня есть веб-сайт, который использует метатег viewport, чтобы сообщать мобильным браузерам, как отображать контент (). Просмотр страницы в браузере Android выглядит корректно (и iPhone, и т. Д.).

Когда я загружаю страницу в компонент WebView в приложении для Android, WebView игнорирует тег «VIEWPORT» и отображает страницу с «полным» разрешением, которое в данном случае увеличивается.

Answer 1

После долгих экспериментов я определил, что Android WebView не будет подчиняться настройке 'viewport', если фактическая страница имеет ширину, превышающую настройку viewport.

Например, я устанавливал область просмотра на 500 пикселей, но на моей странице был элемент, обеспечивающий ширину 960 пикселей. Область просмотра не выполнялась, потому что WebView отказывался скрывать этот дополнительный контент.

Это кажется очевидным, когда я набираю текст, но я, должно быть, потратил несколько дней на решение этой проблемы.

Answer 2

Попробуйте использовать этот метод класса WebSetting

setUseWideViewPort (boolean use)

Я использую это, чтобы сказать веб-обозревателю Android, чтобы он считал мой тег "viewport"

Answer 3

Как сказано в ссылке в лучшем ответе, вы можете с помощью метатега указать, как устройство должно реагировать на размер вашего веб-приложения по сравнению с экраном. Следующий тег заставил телефон Android соответствовать размеру окна моего веб-приложения:

<meta name="viewport" content="target-densitydpi=high-dpi" />

Answer 4

Дважды проверьте свою реализацию в разделе «Создание веб-страниц для поддержки различных плотностей экрана» документации WebView: http://developer.android.com/reference/android/webkit/WebView.html

Answer 5

Ссылка в принятом ответе и это поможет понять область просмотра на Android.

В моем сценарии используется фиксированная ширина, решение:

settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)

Answer 6

Еще одной ошибкой в ​​реализации на некоторых телефонах Android является тот факт, что, например, HTC Desire HD будет игнорировать TAG области просмотра - user-scale = no полностью.

Answer 7

Единственное, что сработало для меня, было

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />

, но особенно помогло добавление maximum-scale=1.0, minimum-scale=1.0 к уже существующему тегу. В моем конкретном случае я не хотел давать пользователю возможность увеличивать / уменьшать изображение, поэтому YMMV.

Answer 8

Я могу только подтвердить вашу проблему. Существует открытый выпуск на трекере для Android Пожалуйста, дайте ему право голоса / звезды, если вы затронуты этим.

Answer 9

Используйте это:

 <meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />

Теперь Android WebView и браузер придерживаются настроек области просмотра.

Фу, это заняло много настроек, чтобы получить права. Jeez.