Проблема с метазоном и Android

Я пытаюсь создать общий диалоговый класс javascript на основе JQuery для создания div-всплывающих окон по центру экрана. Достижение этого во всех общих браузерах было простой ванилью.

Для мобильных платформ возникает проблема просмотра; Разница видимого видового экрана (который является вашим текущим «окном просмотра» сайта, как вы его видите, увеличенным или нет) и видовым окном макета (размеры базовой страницы, или, другими словами, окна просмотра CSS).

Для Iphone я смог использовать свойство DOM window.innerWidth и window.innerHeight для настройки центрирования масштабирования, а pageXOffset / pageYOffset – для настройки панорамирования:

// Get dialog width/height var dx = $("#dialog").width(); var dy = $("#dialog").height(); // Get window (layout viewport) width/height var winW = $(window).width(); var winH = $(window).height(); if (window.innerWidth!=winW) { // Zoomed in or users browser window width is smaller than layout width var x = window.pageXOffset+(window.innerWidth-dx)/2; } else { // Not zoomed in var x = window.pageXOffset+(winW-dx)/2; } if (window.innerHeight!=winH) { // Zoomed in or users browser window height is smaller than layout height var y = window.pageYOffset+(window.innerHeight-dy)/2; } else { // Not zoomed in var y = window.pageYOffset+(winH-dy)/2; } 

Затем я устанавливаю свой диалог, устанавливая его left / top на x и y соответственно. Это хорошо работает в большинстве браузеров и даже Iphone, однако он не работает на платформах Android.

После некоторых чрезмерных исследований с использованием Google кажется, что у Android довольно много проблем с свойствами window.innerWidth и window.innerHeight (см. Например, http://www.quirksmode.org/mobile/viewports2.html , поиск «Измерение Видимый видовой экран ").

Вариант будет состоять в том, чтобы использовать useragent для идентификации Android-браузеров и всегда позиционировать диалог в окне window.pageXOffset / window.pageYOffset, который всегда позиционирует их сверху / слева в видимом окне просмотра. Однако это плохой вариант по многим причинам, не в последнюю очередь, что он плохо выглядит при уменьшении.

Кто-нибудь знает способ вычисления видимого окна просмотра на Android? Или кто-нибудь нашел обходное решение для этого?

Solutions Collecting From Web of "Проблема с метазоном и Android"

Это старый вопрос, но я не мог найти хороший ответ на этот вопрос … Итак, после кучи работы над кучей Android-устройств, я думаю, что нашел отличное решение (взлома) для Android-проблемы. Попробуй это:

 <!--HTML VERSION --> <div id="sojernTest" style="position:absolute; top:0;bottom:0;left:0;right:0;display:none;"></div> 

ИЛИ

 // JAVASCRIPT WITH CSS CLASS var div = document.createElement('div'); div.id = "screenSizeHolder"; div.className = "screen_size_holder"; document.body.insertBefore(div, document.body.firstChild); $('#screenSizeHolder').html("&nbsp;"); 

Затем возьмите размер этого элемента

 screenHeight = parseInt($('#screenSizeHolder').css('height').replace('px','')); screenWidth = parseInt($('#screenSizeHolder').css('width').replace('px','')); 

Я опубликовал справедливое число моих исследований по связанной проблеме видового экрана / ширины здесь, что может помочь вам … Веб-приложение для проблемы WIDTH в браузере Android

Ответ заключается в том, что вы должны установить ширину окна просмотра в ширину устройства. Кажется, он работает во всех версиях Android, которые я тестировал (2.1, 2.2 и 2.3).

 <meta name="viewport" content="width=device-width"> 

Я придумал немного другой подход, который должен работать на перекрестных платформах

http://www.jqui.net/tips-tricks/fixing-the-auto-scale-on-mobile-devices/

Также ответил на этот вопрос …

Как установить метаданные viewport для iPhone, которые правильно обрабатывают вращение?