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

我真的不知道该怎么做，我有一个银河标签2,7英寸平板电脑和使用铬作为浏览器（v26.0.1410.58）在Android 4.1.1。我以纵向模式加载网络应用程序，并且媒体查询匹配得很好，我将其切换到横向模式，并且一切工作都很好，但是当我将其切换回纵向模式时，浏览器不适用任何风格，以及连接到PC的平板电脑USB调试应用程序，我可以看到铬没有找到与任何媒体查询匹配了。切换肖像 - 风景肖像后失去媒体查询匹配

媒体查询我申请是：

（器件宽度：600px的）和（MAX-设备高度：1,024）和（最大宽度：600px的）和（分-device高度：976px）和（方向：纵向）

如果我检查设备的宽度和高度在浏览器之后，这发生之前，他们根本就不要么改变。

一些数据可能是有用的：

screen.width：600

screen.height：976

$（窗口）.WIDTH（）：600

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

来源

2013-04-15 unjuken

你解决了这个问题吗？ – Rob

我和你有100％的问题，并且使用max-width代替max-device-width解决了 – artdias90

artdias90，感谢您的建议！从查询中删除“设备”为我工作。 –

我没有您的设备进行测试，但我通常坚持简单的媒体查询。

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

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

来源

2013-05-07 15:17:00 Patrick

问题是我需要非常特定的媒体查询，因为应用程序将不得不支持很多设备。另外，在某些情况下，使用最大宽度而不是设备宽度将使媒体查询重叠。 – unjuken

我的建议是流体容纳更多的设备。对所有媒体查询使用最大宽度，选择几个断点，然后使用百分比来表示元素宽度。以这种方式，您可以将内容提供给几乎任何设备。我知道这是模糊的，但希望它有助于某种方式。我设计了很多移动内容，而且我没有这种类型的问题。我的设计可以来回缩放（从纵向到横向），而不会在我测试过的设备上出现问题。 – Patrick

方向媒体查询是一个真正的痛苦，以支持......我会建议远离他们。我使用了一组非常好的媒体查询。我只是反向工程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 */

来源

2014-08-05 23:45:40 Chad

你应该尝试

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

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

来源

2015-02-27 04:10:24

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

回答

相关问题