Css 媒体查询最小宽度：1000px，包括iPad景观

如何瞄准宽度超过1000像素的设备？也就是说，包括横向模式的iPad和大多数台式机，但不包括纵向模式的iPad

我发现：

---

但是，我更希望我的媒体查询能够根据内容提示布局更改的宽度而不是特定的设备进行调整。

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

在您的主要CSS中，仅包括：

@media (min-width: 1000px) {

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

}  

在页面的开头包括

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

编辑
以下是一个工作示例，您可以在iPad上查看：
直播：
代码视图：

---

祝你好运

虽然你从CSS技巧中引用的那篇文章非常方便（克里斯·科伊尔是我的书呆子偶像），但它可能有点误导。媒体查询的核心只是花哨的

if

语句，如果整个语句的计算结果为

true

，则按照正常的级联规则应用相应的样式表或样式规则

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

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

请注意

屏幕

参数。它没有提到设备的宽度和浏览器的chrome。用通俗易懂的英语阅读，上面写着“如果我们正在使用的媒体是屏幕，如果屏幕最小为768px或更大，请使用这些样式

因此，要回答您的问题：要将大于1000px的屏幕作为目标，请尝试以下操作：

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

---

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

据我所知，iPad总是报告其宽度为768px，高度为1024px，无论是横向还是纵向模式e、 这就是我最初发布问题的原因（可能应该包括在原始问题中）回答这个问题得到了答案。+1。大卫回答了我进一步的问题。是否

width=device width

阻止iPad在横向模式下报告width=768px和height=1024px？@FredrikP，请查看我的编辑。对于CSS媒体查询，如果你保持简单，不要想得太多，我发现你会得到奖励。希望这对你有所帮助我设法弄到一台iPad并检查了一下。（我真的应该买一台。）正如你所说的那样，JSFIDLE黑客添加视口元似乎不再有效。JSFIDLE在我看来还行@ArtemShafranov，请再次检查。如果预览帧的宽度>1000px，你应该会看到主体背景从白色变为灰色。

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