防止在桌面视图（横向）上运行移动特定媒体查询（横向）答案

【问题标题】：Prevent running of mobile specific media query(landscape) on desktop view(landscape)防止在桌面视图（横向）上运行移动特定媒体查询（横向）
【发布时间】：2019-05-22 19:10:42
【问题描述】：

首先我真的很抱歉这个问题的标题，因为我无法弄清楚如何描述我的问题，所以这就是我使用这个标题的原因。

现在我是使用媒体查询的初学者，我在我的练习项目中使用它们以提高响应能力，我想在该项目上应用方向锁定。例如，该项目在移动纵向视图上兼容，但在移动横向视图上不可用。

我已经为方向锁定应用了以下代码，但问题是当浏览器窗口调整大小并且匹配屏幕分辨率时，锁定应用。我不希望在桌面视图上应用锁。

有一种方法是使用设备宽度，但已被 Mozilla 弃用。那么，有没有什么办法只用 min-width 或其他东西来解决这个问题？

如果您无法理解，请告诉我。

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"/>
    <style>
    #div-2{
    display:none;
    }
    @media screen and(min-width:320px) and (orientation:landscape){
    #div-1{
    display:none;
    }
    #div-2{
    display:block;
    }
    }
    </style>
</head>
<body>
    <div id="div-1"><p>Orientation lock not applied.</p></div>
    <div id="div-2"><p>Orientation lock applied.</p></div>
</body>

【问题讨论】：

对不起我的朋友。你分享的帖子不是我的问题。
您希望 div-1 在方向模式为横向时可见吗？
是的，我希望 div-1 在横向视图中可见，但是当横向视图基于桌面时。但在移动横向视图中，我希望 div-1 消失并显示 div-2。

标签： html css responsive-design media-queries

【解决方案1】：

好的，我明白了，现在替换代码希望这对你有用：

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
    <style>

        @media screen and (min-width: 320px) and (orientation:landscape) {
            #div-1 {
                display: block;
}
#div-2 {
                display: none;
}
}
@media screen and (min-width: 961px) and (orientation:landscape) {
#div-2 {
display: none;
}
#div-1{
display:block;
}
}
</style>
</head>
<body>
    <div id="div-1">
<p>Orientation lock not applied.</p>
</div>
<div id="div-2>
        <p>Orientation lock applied.</p>
</div>
</body>
</html>

【讨论】：

对不起我的朋友。你的回答对我不起作用。可能是我无法正确地向您和其他人解释我的问题。对此我感到非常抱歉，但我会再次尝试解释。我希望当网页处于移动设备的横向视图时显示“div-2”，但不显示在桌面的横向视图中。使用 device-width 属性可以解决我的问题，但 mozilla 已弃用该属性并建议不要进一步使用它。所以我想知道有没有办法使用最小宽度或高度来解决这个问题？

【解决方案2】：

我觉得没什么奇怪的。

您编写此媒体查询：

@media only screen and (min-width:320px) and (orientation:landscape) {
        #div-1 {
            display: none;
        }

        #div-2 {
            display: block;
        }
    }

包含桌面。所以在桌面 div-1 是隐藏的，而 div-2 是可见的。

如果您希望此媒体查询仅适用于移动设备，您必须使用 max-width

过滤比您想要的更大的屏幕（桌面）。这意味着样式不适用于桌面。此媒体查询适用于浏览器的大小，如果您想过滤一些与浏览器宽度无关的设备大小，您必须使用此媒体查询：

@media only screen and (max-device-width: 320px)

【讨论】：

非常正确，但是浏览器窗口大小调整问题呢？当有人调整他们的浏览器窗口的大小（人们主要用来检查网站的响应能力）并且它达到一个特定的宽度（假设为 500 像素）时，媒体查询将运行。但我不想那样。我只想在移动设备上运行它。
因此您可以使用仅适用于设备宽度的“最大设备宽度”。浏览器的大小没有什么不同。然后媒体查询不会通过浏览器调整大小来运行。
我们可以使用 max-device-width 和 min-device-width，他们已经解决了我的问题，但是 Mozilla 已经停止使用这些属性，他们不建议进一步使用它们。这就是为什么我正在寻找一种替代方法或一种使用 min-width 之类的设备宽度的方法。
我相信我说的是唯一的方法。请看这个：stackoverflow.com/questions/6747242/…
是的，这是许多方法之一，并且最常用。但是，当未来的浏览器停止识别 max-device-width 和 max-device-height（因为 Mozilla 已经停止使用它们）时，这些属性将不起作用。没问题我的朋友。你尽力了。感谢你的支持。我认为我需要使用 JavaScript 来定位设备并实现我的要求。