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

У меня есть веб-страница, которую я пытаюсь отобразить на своем 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). Тем не менее, даже в 2x, страница не масштабируется до ширины эмулятора... Я должен был бы установить это как-то вроде "initial-scale = 2.5".

Ответ 1

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

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

Сообщите мне, начнет ли работать тэг viewport.

Ответ 2

Я попробовал

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

Масштаб не включен.

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

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

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

И появилась страница навигации по страницам, нажав кнопку на странице, и кнопка назад Android не работает правильно.

Ответ 3

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

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

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

Ответ 4

Если вы хотите, чтобы андроид масштабировал ваше содержимое до фиксированной ширины (например, 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.

Ответ 5

Я использую это на iphone с телефонной связью

<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="#" onclick="location.href='http://trevorrudolph.com/wordpress/apple-touch-icon.png'; return false;">