Установить изображение на полную высоту экрана на PhoneGap - Понимание window.devicePixelRatio

Question

Я пытаюсь установить изображение на полную высоту экрана в приложении phoneGap. В настоящее время я использую следующий код, чтобы определить "размеры" экрана, и я использую javascript, чтобы установить разрешение изображения для этих тусклых цветов.

$('.fullPageImage').height(window.screen.availHeight);

Это дает желаемый результат на iPhone 6 (дисплей сетчатки), а также рендеринг на моем ноутбуке. Проблема в том, что когда я пробую это на моем Galaxy Note-3, изображение ОГРОМНОЕ, и вот почему: когда я console.log(window.screen.availHeight); Похоже, что Note считает, что его высота составляет 1920 пикселей - тогда как у моего iPhone 6 только 647 (и это дисплей сетчатки), поэтому я знаю, что 1920 - это не фактическое количество пикселей (или это?) Я посмотрел, как устройство получает его window.screen.availHeight и обнаружил, что есть эта переменная под названием window.devicePixelRatio и его значение в примечании 3 равно 3. Я понял, что размер окна просмотра в Note 3 равен 360x640, поэтому имеет смысл значение 3 для devicePixelRatio. Теперь, что меня озадачивает то, что когда я console.log(window.devicePixelRatio); на моем айфоне 6 результат 2. Я попытался установить высоту изображения на 1/3 от значения "vendHeight", используя этот код:

$('.fullPageImage').height(window.screen.availHeight/window.devicePixelRatio);

и он отлично работает на Note 3 (поскольку он уменьшает высоту изображения до 360 - как и должно быть), но на iPhone уменьшение изображения до 324 (или что-то близкое) означает, что изображение появляется только на половине страницы рост.

Мой вопрос, вместо деления на devicePixelRatio, есть ли еще одна переменная, которую я могу получить от устройства, чтобы определить соотношение, на которое нужно сжать изображение? Полученное соотношение должно составлять 1 на iPhone и 1/3 на Note 3, чтобы изображение корректно отображалось по всей высоте.

Огромное спасибо заранее!

Answer 1

Вместо того, чтобы явно устанавливать высоту, у вас должна быть возможность использовать единицы просмотра с CSS... чтобы вы могли сделать что-то вроде следующего:

$('.fullPageImage').css("height", "100vh");

Это установит высоту на 100% вертикальной высоты области просмотра, каким бы ни было это значение.

Вы также можете посмотреть в добавлении <meta name="viewport" content="width=device-width, initial-scale=1"> тег к вашему заголовку.