切换纵向-横向-纵向后丢失媒体查询匹配

Posted 2023-03-06

【中文标题】切换纵向-横向-纵向后丢失媒体查询匹配

【英文标题】：Losing media query matching after switching portrait-landscape-portrait

【发布时间】：2013-04-07 22:06:20

【问题描述】：

我真的不知道该怎么办，我有一个 Galaxy Tab 2、7 英寸平板电脑，并在 android 4.1.1 中使用 chrome 作为浏览器 (v26.0.1410.58)。 我正在以纵向模式加载 Web 应用程序，媒体查询匹配得很好，我将其切换到横向模式，一切正常，但是当我将其切换回纵向模式时，浏览器不会应用任何样式完全没有，并使用连接到 PC 的平板电脑 USB 调试应用程序，我可以看到 chrome 没有找到任何媒体查询的匹配项。

我正在应用的媒体查询是：

（设备宽度：600px）和 （最大设备高度：1024 像素）和 （最大宽度：600 像素）和 （最小设备高度：976px）和 （方向：纵向）

如果我在发生这种情况之后和之前在浏览器中检查设备的宽度和高度，它们也根本不会改变。

一些可能有用的数据：

screen.width: 600

屏幕高度：976

$(window).width(): 600

仅在此设备中发生，我需要支持此选项卡中的应用程序。

【问题讨论】：

问题解决了吗？

我和你有 100% 相同的问题，并且使用 max-width 而不是 max-device-width 解决了

artdias90，感谢您的建议！从查询中删除“设备”对我有用。

【参考方案1】：

我没有要测试的设备，但我通常坚持使用更简单的媒体查询。

也许只尝试最大宽度而不是设备宽度。我发现这样做加上基于百分比的布局意味着我的布局不是特定于设备的。

@media（最大宽度：600px） ...

【讨论】：

问题是我需要非常具体的媒体查询，因为该应用程序必须支持很多设备。此外，在某些情况下，使用 max-width 而不是 device-width 会使媒体查询相互重叠。

我的建议是流畅地容纳更多设备。对所有媒体查询使用 max-width，选择几个断点，然后使用百分比作为元素宽度。通过这种方式，您可以向几乎任何设备提供内容。我知道这很模糊，但希望它在某种程度上有所帮助。我设计了很多移动内容，我没有遇到过这种类型的问题。我的设计来回缩放（从纵向到横向），在我测试过的设备上没有问题。

【参考方案2】：

Orientation 媒体查询很难支持...我建议远离它们。我使用了一组非常好的媒体查询。我只是对 Zurb 的 Foundation 媒体查询进行了逆向工程。见下文...

// Small screens
@media only screen  
/* Define mobile styles */

@media only screen and (max-width: 40em)  
/* max-width 640px, mobile-only styles, use when QAing mobile issues */

// Medium screens
@media only screen and (min-width: 40.063em)  
/* min-width 641px, medium screens */

@media only screen and (min-width: 40.063em) and (max-width: 64em)  
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */

// Large screens
@media only screen and (min-width: 64.063em)  
/* min-width 1025px, large screens */

@media only screen and (min-width: 64.063em) and (max-width: 90em)  
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */

// XLarge screens
@media only screen and (min-width: 90.063em)  
/* min-width 1441px, xlarge screens */

@media only screen and (min-width: 90.063em) and (max-width: 120em)  
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */

// XXLarge screens
@media only screen and (min-width: 120.063em)  
/* min-width 1921px, xxlarge screens */

【参考方案3】：

你应该试试

@media only screen and (max-device-width: 600px)  /* STYLES GO HERE */
/* styles apply only in portrait mode */

@media only screen and (min-device-width: 601px)  /* STYLES GO HERE */
/* styles apply only in landscape mode */

如果您需要一种样式只能在您设备的范围中工作... Obs：如果您希望样式应用于两者之一，请仅编写方向位。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)  /* STYLES GO HERE */

删除您声明的其他值，因为高度会造成冲突。