Я работаю над портфолио. Я использую отзывчивый + адаптивный дизайн благодаря 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; }
Проблема:
Мне нужно, чтобы вертикальные изображения никогда не были длиннее фактической высоты экрана.
Также я хочу использовать функцию салфетки (проведите ровно по центру экрана, в этом случае изображения отлично покроют вертикально высоту экрана), но это проблема для более позднего вопроса).
Я тестировал свой сайт в эмуляторе 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()
?
попробуйте заменить максимальную высоту высотой;
$('.horgallery .images li').css({'height': windowHeight});
также я не думаю, что это необходимо:
$(window).resize(horgalleryImagesSize); // Trigger Resize REAL-TIME
редактировать
то вам следует играть с CSS3 image attr как обложкой, содержать и т.д.
также инициировать новый
$('.horgallery .images li').css({'height': windowHeight});
каждый раз, когда меняется ориентация (я помню, было событие onorientationchange или очень похоже)