Установите изображение в полноэкранном режиме на PhoneGap - Understanding window.devicePixelRatio

Question

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

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

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

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

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

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

Большое вам спасибо!

Answer 1

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

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

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

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