Как сделать так, чтобы правила CSS применялись при переходе в ландшафтный режим?

Question

Мне нужна моя страница для адаптации из книжного в альбомную ориентацию для Iphone X без необходимости перезагрузки страницы.

Вот медиазапросы, которые я использую:

// Screen size variables
$screen-sm-min: 576px;  // Small tablets and large smartphones (landscape view)

$screen-lg-min: 992px;  // Tablets and small desktops
//$screen-lg-min: 1024px;
$screen-xl-min: 1200px; // Large tablets and desktops


// Mixins
@mixin xs { @media (max-width: #{$screen-sm-min}),
        (min-device-width : 375px) and (max-device-width : 667px),
        (min-device-width : 414px) and (max-device-width : 736px),
        (min-device-width : 375px) and (max-device-width : 812px) and (-webkit-device-pixel-ratio : 3)

{@content;} } // Tiny devices


@mixin md { @media (max-width: #{$screen-lg-min}), (min-device-width : 768px) and (max-device-width : 1024px),
            (min-device-height : 1024px) and (max-device-width : 1366px)

    {@content;} } // Medium devices

А вот и ссылка на страницу:

http://dev2.lemeilleurducbd.com/location_etu/home.html

Я посмотрел в Google, но не смог найти ответ на этот вопрос.

Спасибо за вашу помощь

Answer 1

Я поместил кусок javascript на тег body, который адаптировал ширину тела в соответствии с окном. Это то, что мешало переходить в ландшафтный режим без перезагрузки страницы.

Answer 2

CSS решение

Вы можете использовать ориентацию в медиа-запросах.

альбомная правила применяются, когда ширина окна браузера больше высоты:

@media (orientation: landscape) {
    ...
}

портрет правила применяются, когда высота окна браузера превышает ширину:

@media (orientation: portrait) {
    ...
}

Решение JS ( Источник )

Примечание. К сожалению, эта функция не поддерживается в Safari.

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

screen.addEventListener("orientationchange", function () { 
    console.log("screen orientation: " + screen.orientation); 
});

---

Другим вариантом будет прослушивание размеров окна и сравнение соотношения ширины и высоты.

if (width/height > 1) { //landscape } else { portrait }.

Я рекомендую регулировать размер окна слушателя.