С помощью свойств окна innerWidth и innerHeight вы можете рассчитать ширину и высоту экрана в пикселях. На моем экране 2560x1600 он возвращает размеры 1280x800 с учетом отношения пикселей к устройству.
function getWindowDimensions() {
const width = window.innerWidth;
const height = window.innerHeight;
const ratio = (width / height) * 100;
return { width, height, ratio };
}
const { width } = getWindowDimensions();
if (width < 768) {
galleryImages = portraitImages;
} else {
galleryImages = landscapeImages;
}
Кроме того, вместо выбора изображений в JavaScript вы также можете использовать <picture> и используйте атрибут srcset. С элементом <picture> вы можете добавлять медиазапросы для показа изображений на основе условия в этом запросе. Это даст вам возможность добавить оба набора изображений в HTML, и браузер затем решит, какое изображение показать на основе вашего запроса.
<picture>
<source media="(max-width: 767px)" srcset="portrait.jpg">
<source media="(min-width: 768px)" srcset="landscape.jpg">
<img src="landscape.jpg" alt="Your image description">
</picture>
Я бы посоветовал вам создать пары для вашего изображения, чтобы добавить к элементу изображения. Например, в массиве объектов с ключами portrait и landscape. L oop над массивом и создать элемент <picture> для каждой из этих пар с тегами <source>, указанными для медиазапроса и соответствующим ему значением srcset.
const images = [
{
portrait: './portrait-image-1.jpg',
landscape: './landscape-image-1.jpg'
},
{
portrait: './portrait-image-2.jpg',
landscape: './landscape-image-2.jpg'
},
{
portrait: './portrait-image-3.jpg',
landscape: './landscape-image-3.jpg'
}
];
for (const { portrait, landscape } of images) {
const picture = document.createElement('picture');
const sourcePortrait = document.createElement('source');
const sourceLandscape = document.createElement('source');
const image = document.createElement('img');
sourcePortrait.media = '(max-width: 767px)';
sourcePortrait.srcset = portrait;
sourceLandscape.media = '(min-width: 768px)';
sourceLandscape.srcset = landscape;
image.src = landscape;
picture.append(sourcePortrait, sourceLandscape, image);
document.body.append(picture);
}
В противном случае для обнаружения устройство, которое кто-то использует, например мобильный телефон, затем проверьте userAgent на наличие ключевых слов , которые распознаются как телефоны. Для обнаружения устройств это хорошо, но для адаптивной веб-разработки не так много, как многие другие устройства и новый браузер могут быть добавлены и могут сломаться в будущем.