Question

如何定位宽度超过1000像素的设备？也就是说，包括横向模式的iPad和大多数桌面，但在纵向模式下不包括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 */
}

但是，如果我的媒体查询可以通过内容提示布局更改而不是特定设备的宽度来形成，我更愿意。

Answer 1

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

在您的主要CSS中只包括：

@media (min-width: 1000px) {

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

}

并在页面的头部包含

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

EDIT
这是一个可以在iPad上查看的工作示例：
直播：http://fiddle.jshell.net/panchroma/Bn4ah/show/
代码视图：http://fiddle.jshell.net/panchroma/Bn4ah

祝你好运！

Answer 2

虽然你从CSS-Tricks引用的那篇文章是一个非常方便的参考（而Chris Coyier是我的书呆子偶像），但它可能有点误导。媒体查询的核心只是花哨的if语句，如果整个语句的评估结果为true，则应用相应的样式表或样式规则，遵循正常的级联规则。

让我们看一下常见的媒体查询：

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

请注意screen参数。它没有说明设备宽度和浏览器镶边。用简单的英文阅读，它说“如果我们正在处理的媒体是屏幕，如果该屏幕至少是768px或更大，请使用这些样式。

所以，回答你的问题：定位大于1000px宽的屏幕，试试这个：

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

请记住，您的目标所有屏幕至少1000像素宽。如果您需要定位特定设备，我建议您使用JavaScript来处理特定的UserAgent定位。

媒体查询最小宽度：1000px，包括iPad格局

2 个答案: