媒体查询最小宽度：1000px包括iPad风景

如何定位宽度超过1000像素的设备？也就是说，包括横向模式和大多数桌面的iPad，但不包括纵向模式的iPad。媒体查询最小宽度：1000px包括iPad风景

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

/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
/* Styles */ 
}

不过，我宁愿如果我的媒体查询可以用在什么宽度的内容提示布局的变化，而不是通过特定设备的形状。

来源

2013-10-09 Fredrik P

如果我正确理解您的问题，则根本不需要尝试和定位特定设备。

在你的主要CSS只是包括：

@media (min-width: 1000px) { 

/* CSS styles for viewports 1000px and up */ 

}

，并在页面的头部包括

<meta name="viewport" content="width=device-width, initial-scale=1.0">

编辑
这里是工作的例子，你可以在iPad上检查：
直播：http://fiddle.jshell.net/panchroma/Bn4ah/show/
代码视图：http://fiddle.jshell.net/panchroma/Bn4ah

祝你好运！

来源

2013-10-09 18:56:20

在横向模式下，'width = device-width'是否阻止iPad报告宽度= 768px和高度= 1024px？ –

@FredrikP，请参阅我的编辑。有了CSS媒体查询，我发现如果你保持简单并且不想过，你会得到回报。希望这有助于 –

谢谢你的小提琴。我设法弄到一台iPad并检查了它。（我真的应该买一个。）它就像你说的那样工作。 –

虽然您从CSS-Tricks引用的文章是非常方便的参考资料（Chris Coyier是我的书呆子偶像），但它可能有点误导。在他们核心的媒体查询只是看起来像是if语句，如果整个语句的计算结果为true，则按照正常的级联规则应用相应的样式表或样式规则。

让我们看一个共同的媒体查询：

@media screen and (min-width: 768px) { ... }

通知的screen参数。它没有提到设备宽度和浏览器镶边。阅读简单的英语，它说：“如果我们正在处理的介质是屏幕，如果该屏幕是最小的768px或更大，使用这些样式。

所以，回答你问题：目标屏幕是比1000像素宽较大，试试这个：

@media screen and (min-width: 1000px) { ... }

只要记住，你是针对广泛的所有屏幕至少1000像素如果您需要针对特定的设备。我建议使用JavaScript来处理特定的UserAgent定位。

来源

2013-10-09 20:09:33 MikeZ

从我听说，似乎iPad总是报告其宽度为768px，高度为1024px，无论是横向还是纵向模式。见例如http://stackoverflow.com/questions/7726411/min-width-media-query-not-working-on-ipad#answer-7758356。这就是为什么我首先发布我的问题（也许应该包含在原始问题中）的原因。 –

+1回答这个问题。大卫得到了解决我的进一步问题的答案。 –

媒体查询最小宽度：1000px包括iPad风景

回答

相关问题