移动方向更改未应用 CSS

Posted 2023-03-06

【中文标题】移动方向更改未应用 CSS

【英文标题】：Mobile orientation change not applying CSS

【发布时间】：2013-09-15 20:36:32

【问题描述】：

我正在测试我正在开发并正在使用媒体查询的网站。

当我在浏览器中测试和调整页面大小时，一切都很好。

但是当我在移动设备上进行测试时，我在更改手机方向时遇到了问题。

如果我以landscape 模式加载页面，则会应用正确的 CSS。

当我更改为portrait 时，CSS 也是正确的。

但如果我回到landscape，portrait css 类仍在应用中。

我正在使用这些元标记

<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

在我的媒体查询中，我有

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape)  ... 

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px)  ...  

我已经提醒设备宽度以确保它没问题，在landscape 模式下它是598px 宽度和portrait 是384px

我使用的是 Nexus 4 (android 4.3)

为什么我改回方向后 CSS 没有应用？

编辑： 如果我在portrait 中加载站点，然后更改为landscape，则不会应用CSS。 好像一旦调到最小分辨率就回不去了。

【问题讨论】：

你每次都刷新吗？如果没有，很确定你必须使用 javascript 使其响应

我很确定你必须使用 JS 来重置 css。使用 jquery.resize() 修复 css 的方向偏移

@beautifulcoder 不，我没有点击刷新，当我点击刷新时，css 看起来很好......这是我在页面加载后更改方向的时候。

我认为您不必刷新，请尝试调整浏览器窗口的大小。

@David，在 jquery.resize() 上，我提醒了 $(window).width() 并且我得到了正确的新宽度，当我改变方向时 resize() 正在触发。跨度>

【参考方案1】：

您的媒体查询有重叠。最大宽度 520 也适用于最大宽度 610。此外，您在横向中有一个 OR，因此如果最大宽度 610 为真，则在纵向中可能为真。重叠的媒体查询将像 CSS 一样工作，因为它是级联的，所以你会得到奇怪的行为。

我在您的查询中没有看到任何对orientation:portrait 的引用，所以您如何知道正在应用纵向类。在进行方向查询时，您通常希望将其设为非此即彼。

还可以尝试添加 min-width 以消除任何宽度重叠

@media only screen and (orientation:landscape) ...

@media only screen and (orientation:portrait) ...

【讨论】：

谢谢。我知道重叠，在这种情况下没关系。但问题是我的设备是 598 (Nexus 4)，所以不应该应用 max-width 520 的类。

【参考方案2】：

在我的 Nexus 4 上，我有一些看起来像这样的东西，似乎适用于您的测试用例：

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

而且我在媒体查询中没有提及方向，例如：

@media only screen and (max-width: 610px)  /* Some CSS here */ 

编辑：就媒体查询而言，您似乎必须将 max-device-width 放在其他 max-width 内容之后。在下面的 cmets 中引用 vyx.ca...

刚刚发现我的问题。请注意我如何在其余部分之前定义“最大设备宽度”。如果我把这个条件放在最后，它就会起作用。 'max-device-width' 用于视网膜显示。

【讨论】：

你得到bug的过程是这样的：1.手机横屏，2.按刷新加载页面，3.手机竖屏，4.手机横屏，5.Bug出现。我说的对吗？

您是保留在其他元数据（MobileOptimized 以及其他viewport 数据）中还是删除它？

我删除了它们来测试你给我的东西。它没有用，我尝试了不同的组合，仍然没有用。

如果你去getnimblr.com 可以吗？这是我让它工作的网站。我也在使用来自 modernizr.com 的 Modernizr，它可能会为我修复它。

似乎在您的演示中工作（我注意到导航居中而不是右对齐）。我也在使用modernizr...奇怪

【参考方案3】：

我的问题与我的 CSS 请求的顺序有关。

我曾经在其余部分之前定义'min-device-width'。

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px)  ...  

但如果我最后定义它，它会起作用。

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px)  ... 

有关设备宽度的更多信息：- check out this question

【讨论】：

有一个类似的问题，我通过添加 max-device-x 和我之前使用的 max-x 来解决它。欢呼

【参考方案4】：

众所周知的quiksmode site 将device-width / device-height媒体特征定义为static。

一旦确定，这些媒体查询就是静态的；即，当设备方向更改时，它们不会更新检查的值。 （因此，如果您从纵向开始然后切换到横向，纵向设备宽度仍然很重要。重新加载页面可以解决这个问题。）

这就是为什么在改变方向后仍然使用 max-device-width 的原因。

【参考方案5】：

这段代码对我有用：-

  @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)

    body
    
        background:#009;
    


@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)

    body
    
        background:#993;