1

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

但是，如果我的媒体查询可以通过内容提示布局更改的宽度而不是特定设备来塑造，我会更喜欢。

4

2 回答 2

2

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

在你的主要 CSS 中只包括： 

@media (min-width: 1000px) {

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

}

并在您的页面顶部包括 

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

编辑
这是一个工作示例，您可以在 iPad 中查看：
Live： http: //fiddle.jshell.net/panchroma/Bn4ah/show/
代码视图： http: //fiddle.jshell.net/panchroma/Bn4ah

祝你好运！

于 2013-10-09T18:56:20.140 回答
1

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

我们来看一个常见的媒体查询：

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


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

因此，要回答您的问题：要定位宽度大于 1000 像素的屏幕，请尝试以下操作：

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

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

于 2013-10-09T20:09:33.027 回答