Высота изображения совпадает с высотой телефона / планшета - работает только в Chrome

Я работаю над портфолио. Я использую отзывчивый + адаптивный дизайн благодаря mobile_detect.php. Конкретные коды для настольных и карманных устройств никогда не встречаются друг с другом.

Пожалуйста, загрузите для Chrome расширение "User-Agent Switcher for Chrome": https://chrome.google.com/webstore/detail/djflhoibgkdhkhhjjjllpkjnoahfmg

А для Firefox "User Agent Switcher": https://addons.mozilla.org/hu/firefox/addon/user-agent-switcher/

(Это проще проверять на рабочем столе и устранять неполадки, чем на мобильном устройстве. Мой сайт точно так же выглядит в мобильных браузерах Chrome и Firefox.)

Структура HTML:

<div id="content">
 <div class="horgallery">
  <ul class="images">
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-001-1024px.jpg" alt="" /></li>
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-002-1024px.jpg" alt="" /></li>
    <li><img src="portfolio/eskuvo/k/lantosistvan-eskuvo-003-1024px.jpg" alt="" /></li>
  </ul><!-- .images -->
 </div><!-- .horgallery -->
</div><!-- #content -->

JS/скрипты-mobile.js:

// Vertical image resize for Mobile/Tablet Window height
$(document).ready(function(){
function horgalleryImagesSize(all) {
    windowHeight = $(window).height();
    if (all) {
        $('.horgallery .images li').css({'max-height': windowHeight});
    }
}
$(document).ready(horgalleryImagesSize); // Trigger calculation
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
});

CSS/mobile.css:

.horgallery .images li { float: none; clear: both; display: block; position: relative; }
.horgallery .images img { float: none; max-width: 100%; max-height: 100%; }
.horgallery .images li { padding: 0 0 30px 0; text-align: center; }

Проблема:

• Дизайн работает только на мой вкус в последних Chrome Desktop и мобильных устройствах.
• Обои для рабочего стола и мобильные устройства Firefox, показывающие изображения с полной шириной экрана, но вырезающие части изображения, которые выше высоты экрана (javascript делает свою работу без проблем).
• Мобильный браузер Android, похоже, изменяет размеры изображений, но при загрузке заканчивается, нижнее заполнение исчезает, а вертикальные изображения переполняют соседние.

Мне нужно, чтобы вертикальные изображения никогда не были длиннее фактической высоты экрана.

Также я хочу использовать функцию салфетки (проведите ровно по центру экрана, в этом случае изображения отлично покроют вертикально высоту экрана), но это проблема для более позднего вопроса).

Я тестировал свой сайт в эмуляторе Genymotion с Android 4.3.

Другой вариант - поддерживать пропорции изображения в реальном времени и устанавливать их высоту на высоту окна. Но я не программист на JavaScript, и я не знаю, как это сделать.

EDIT: Спасибо Сантьяго!

// Vertical image resize for Mobile/Tablet Window heigh
$(document).ready(function(){
screen.addEventListener("orientationchange", function horgalleryImagesSize(all) {
    windowHeight = $(window).height();
    if (all) {
        $('.horgallery .images li').css({'height': windowHeight});
    }
})
$(document).ready(horgalleryImagesSize); // Trigger calculation
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
});

Решает проблему в родном Android-браузере. Хром отличный. Firefox использует полную ширину окна. Мобильные браузеры Opera: Bahh... У меня нет изменений для тестирования в Safari. Существует ли расширение пользовательского агента для рабочего стола Safari?

Похоже, мне нужно жить с этим, что теперь Firefox - плохой парень.

EDIT2:

Я не знаю JavaScript. Как мы можем рассчитать соотношение сторон изображения по ширине и высоте и изменить размер до $(window).height()?