У меня есть веб-страница, которую я пытаюсь отобразить на своем 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".
Попробуйте добавить следующие две строки в метод onCreate() класса Java, который расширяет DroidGap.
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
Сообщите мне, начнет ли работать тэг viewport.
Я попробовал
this.appView.getSettings().setUseWideViewPort(true);
this.appView.getSettings().setLoadWithOverviewMode(true);
Масштаб не включен.
При следующей настройке масштабирование включено
this.appView.getStrings().setSupportZoom(true);
Но он не контролируется корректно тегом viewport, теперь вся страница масштабируется даже с минимальным масштабом = 1 и максимальным масштабом = 1, установленным в теге просмотра.
И появилась страница навигации по страницам, нажав кнопку на странице, и кнопка назад Android не работает правильно.
Здесь есть хорошие ответы, но API Кордовы, похоже, немного изменился.
В методе OnCreate (после loadUrl или после прямого вызова init):
CordovaWebViewEngine engine = appView.getEngine();
SystemWebView webView = (SystemWebView)engine.getView();
WebSettings settings = webView.getSettings();
settings.setUseWideViewPort(true);
settings.setLoadWithOverviewMode(true);
Если вы хотите, чтобы андроид масштабировал ваше содержимое до фиксированной ширины (например, 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.
Я использую это на 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;">