Question

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

我正在申请的媒体查询是：

（设备宽度：600px）和（max-device-height：1024px）和（最大宽度：600px）和（min-device-height：976px）和（方向：肖像）

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

一些可能有用的数据：

screen.width：600

screen.height：976

$（window）.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 */

如果您需要一种样式才能在设备的范围之间工作... Obs：如果您希望样式应用于其中一个，请将方向位仅。

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

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

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

3 个答案: