切换人像-风景-人像后失去媒体查询匹配

Question

我真的不知道该怎么做，我有一个galaxy Tab 2,7英寸平板电脑，在Android 4.1.1中使用chrome浏览器(v26.0.1410.58)。我在纵向模式下加载web应用程序，媒体查询匹配得很好，我把它切换到横向模式，一切都很好，但是当我切换回纵向模式时，浏览器根本不应用任何样式，并且用平板电脑usb连接到PC调试应用程序，我可以看到chrome没有找到与任何媒体查询匹配了。

我申请的媒体查询是:

(device-width: 600px)(max-device-height: 1024px)(max-width: 600px)(min-device-height: 976px)(方向:肖像)

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

一些可能有用的数据:

屏幕。宽度:600

屏幕。身高:976

$(窗口).width(): 600年

它只发生在这个设备上，我需要在这个选项卡中支持应用程序

Answer 1

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

也许可以试试max-width而不是device-width。我发现这样做加上基于百分比的布局意味着我的布局不是特定于设备的。

@media (max-width: 600px){…}

Answer 2

定向媒体查询是一个真正的痛苦支持…我建议离他们远点。我有一组非常好的媒体查询。我刚刚逆向设计了Zurb基金会的媒体查询。见下文…

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

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

如果你需要一个样式只能在中工作，在你的设备范围内…注意:如果你想让样式应用于其中一个，只写方向位

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

删除你已经声明的其他值，因为高度会产生冲突。