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

17

У меня есть веб-страница, которую я пытаюсь отобразить на своем 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».

    
задан RyanM 07.02.2011 в 00:37
источник
  • добавляет начальное значение = 1 что-нибудь изменить? –  davejohnson 07.02.2011 в 06:40
  • Привет. мои текущие настройки: <meta name="viewport" content="width = device-width, height = device-height, user-scaleable = no, target-densitydpi = device-dpi, initial-scale = 1.0, минимальная шкала = 1.0, maximum-scale = 1.0 "/> ... Это ничего не делает. Это полностью игнорируется. Спасибо. –  RyanM 07.02.2011 в 14:59
  • Возможно, вы захотите посмотреть мой пост: goo.gl/P1nK3, который также указывает на дефект, который я подал. Скорее всего, они игнорируются, но ценности противоречат друг другу и отбрасываются. У меня много результатов по различным перестановкам параметров. Вы можете найти что-то полезное. :) –  lilbyrdie 08.03.2011 в 21:28

5 ответов

11

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

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

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

    
ответ дан Simon MacDonald 03.11.2011 в 16:35
  • Это он (и ответ Ивана) - для этого нужны еще миллионы долларов. Хотя для меня это общедоступный класс MyApp расширяет метод CordovaActivity, который требует знакомства, а не DroidGap. Возможно, вы могли бы обновить свой ответ, потому что это все еще актуально! –  Willshaw Media 13.06.2014 в 12:26
  • Извините, ребята, я новичок в этом. Где я должен добавить этот код, что мне нужно сделать, чтобы заставить работать мой просмотр? У меня есть проект cordova 3.6, и мой просмотр не работает. Итак ... я нашел это решение, и это звучит неплохо, но ... да, я не знаю, где реализовать код. : - / –  Sithys 14.10.2014 в 13:54
  • Хороший ответ, но API немного изменился. Теперь это: ((SystemWebView) appView.getEngine (). GetView ()). GetSettings (). Xxx –  Philippe 30.08.2015 в 23:43
2

Я попробовал

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

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

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

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

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

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

    
ответ дан Ivan 07.12.2011 в 09:44
  • error: this.appView.getSettings (). setSupportZoom (true); –  Velda 02.09.2015 в 13:20
2

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

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

    CordovaWebViewEngine engine = appView.getEngine();
    SystemWebView webView = (SystemWebView)engine.getView();
    WebSettings settings = webView.getSettings();
    settings.setUseWideViewPort(true);
    settings.setLoadWithOverviewMode(true);
    
ответ дан Philippe 30.08.2015 в 23:51
1

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

    
ответ дан Krunoslav Djakovic 14.03.2013 в 15:41
  • Мне пришлось отменить распределение шкалы, чтобы заставить это работать –  Kae Verens 10.07.2013 в 15:35
  • У меня были надежды на это, но это не сработало. Моя страница 760px, а экран 1080px, он соответствует шкале от ~ 0,465. 760/1080 ~ 0,704. –  Jonas Äppelgran 14.08.2013 в 15:46
  • Я думаю, что трюк здесь заключается в том, что вы не только указываете атрибут width, который должен работать, но, по-видимому, не имеет, а также атрибуты min-scale, max-scale, которые могут работать вместо этого. –  commonpike 02.12.2014 в 18:05
-1

Я использую это на 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="http://trevorrudolph.com/wordpress/apple-touch-icon.png">
    
ответ дан Trevor Rudolph 10.03.2011 в 04:08
  • Я считаю, что проблема связана с Android, но не с iPhone. –  courtsimas 13.02.2012 в 18:02
  • Я написал это давно, прежде чем понял, что –  Trevor Rudolph 13.02.2012 в 19:18
  • Это для iPhone. Viewport прекрасно работает. –  Sithys 14.10.2014 в 13:48