Android-- PhoneGap / WebView игнорирует метатеги области просмотра?

Question

У меня есть веб-страница, которую я пытаюсь отобразить на своем устройстве Android (загруженная из каталога ресурсов проекта) с помощью PhoneGap (который использует обычный WebView, установленный в качестве «appview»), но веб-просмотр полностью игнорирует следующее:

<meta name = "viewport" content = "user-scalable=no,width=device-width" />

Независимо от того, что я установил в этой строке (я пытался явно установить масштаб, установить ширину / высоту в пикселях и т. Д.), Устройство полностью игнорирует его и делает сайт очень маленьким и привязанным к верхнему левому углу. -ручный угол экрана. Я могу увеличить масштаб с помощью жеста повышения (даже если я явно отключил увеличение в HTML-коде выше), но я хочу, чтобы страница была увеличена, чтобы правильно соответствовать устройству при загрузке.

Вот интересный момент ... Если я размещу точно такой же сайт на своем веб-сервере и перейду к нему с помощью браузера по умолчанию на моем тестовом устройстве, страница загрузится правильно (масштабируется до нужного размера для устройства).

Пожалуйста, помогите.

Спасибо.

EDIT1:

Мои текущие настройки:

<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,target-densitydpi=device-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />

Это тоже полностью игнорируется.

EDIT2:

Вот кое-что интересное ...

<meta name="viewport" content="width=device-width, initial-scale=2.0, maximum-scale=2.0, user-scalable=no" />

Приведенная выше строка масштабирует страницу до 2x в эмуляторе, но ничего не меняет на моем устройстве (Samsung Epic работает на 2.2.1). Тем не менее, даже в 2 раза страница не масштабируется до ширины эмулятора ... Мне нужно было бы установить что-то вроде «initial-scale = 2.5».

Answer 1

Попробуйте добавить следующие две строки в метод onCreate () класса Java, который расширяет DroidGap.

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

Дайте мне знать, если ваш тег viewport теперь начинает работать.

Answer 2

Здесь есть хорошие ответы, но API Cordova, похоже, немного изменился.

В методе OnCreate (после loadUrl или после явного вызова init):

    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);

Answer 3

Я попробовал

this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);

Увеличение не включено.

При следующей настройке масштабирование включено

this.appView.getStrings().setSupportZoom(true);

Но это не корректно контролируется тегом окна просмотра, теперь все страницы можно масштабировать, даже если в теге окна просмотра установлены минимальный масштаб = 1 и максимальный масштаб = 1.

Теперь при навигации по странице произошла ошибка: нажатие кнопки на странице приводит к неправильной работе кнопки возврата Android.

Answer 4

Если вы хотите, чтобы Android масштабировал ваш контент до фиксированной ширины (например, 1024), используйте это:

<meta name="viewport" id="viewport" content="width=1024">
<script type="text/javascript">
    var viewPortWidth = 1024;
    function setViewport() {
    if ((navigator.userAgent.toLowerCase().indexOf("android")!=-1)) {
        var wW0 = window.screen.width;
        var scale = wW0/viewPortWidth;
        var vPort = "width="+viewPortWidth+", maximum-scale="+scale+", minimum-scale="+scale+", initial-scale="+scale+", user-scalable=yes";
        document.getElementById("viewport").setAttribute("content", vPort);
    }
    }
    setViewport();
</script>

Кроме того, вы должны добавить прослушиватель событий для onorientationchange для вызова функции setViewport.

Answer 5

Я использую это на iphone с PhoneGap

<meta name="description" content="trevorrudolph.com">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://trevorrudolph.com/wordpress/apple-touch-icon.png">