How to make css rules applied when changing to landscape mode?

Question

I need my page to adapt from portrait to landscape for Iphone X without having to reload the page.

Here are the media Queries I use:

// 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

And here is a link to the page:

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

）在ASP.NET中创建链接

我看过Google，但是找不到这个问题的答案。

感谢您的帮助

Answer 1

CSS解决方案

您可以在媒体查询中使用orientation。

当浏览器窗口的宽度大于高度时，

横向规则适用：

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

当浏览器窗口的高度大于宽度时，

肖像规则适用：

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

JS解决方案（Source）

注意：不幸的是，野生动物园不支持此功能。

您可以在方向更改时收听orientationChange事件，并在需要了解当前方向时阅读screen.orientation。

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

---

另一个选择是听窗口调整大小并比较宽高比。

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

我建议限制窗口大小调整侦听器。

Answer 2

我在body标签上放了一段javascript，它根据windowWith调整了车身宽度，这是防止在不重新加载页面的情况下进入横向模式的原因。