9

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

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

(device-width: 600px) and (max-device-height: 1024px) and (max-width: 600px) and (min-device-height: 976px) and (orientation: portrait)

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

一些可能有用的数据：

屏幕宽度：600

屏幕高度：976

$(窗口).width(): 600

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

4

3 回答 3

1

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

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

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

于 2013-05-07T15:17:00.450 回答
1

定向媒体查询是一个真正的痛苦支持......我建议远离它们。我使用了一组非常好的媒体查询。我只是对 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 */
于 2014-08-05T23:45:40.930 回答
0

你应该试试

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

删除您声明的其他值，它会因为高度而产生冲突。

于 2015-02-27T04:10:24.373 回答