Question

在网站中，我对小型设备使用媒体查询，对屏幕分辨率<= 980px有效。

问题是：在iPad上，在水平视图（1024px）中，应用了css文件。那是为什么？

在桌面（Firefox）上，我没有这个问题。我尝试更改为max-device-width，没有区别。

<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="medium.css" media="(max-width:1150px)">
<link rel="stylesheet" href="mobile.css" media="(max-width:980px)">

感谢目前为止的答案。 要明确：我不是在寻找一种定位iPad的方法。我正在寻找iPad行为背后的原因。它的屏幕宽度为1024px，但它应用的样式表不应该。为什么呢？

修改：我发现了问题/解决方案。见下文。

Answer 1

尝试在单独的CSS样式表中创建媒体查询，该样式表将自动检测视口的大小。

这个网站非常好：

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

Answer 2

使用此媒体查询定位所有iPad版本（iPad 1-5和Mini）。

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

此外，请查看针对this问题发布的解决方案。

Answer 3

您不必为此创建额外的CSS文件，只需使用此文件并添加您的代码

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
----CODE HERE----
}


@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
----CODE HERE----
}

Answer 4

iPad浏览器使用以下信息：

宽度和设备宽度：768 px

高度和设备高度：1024 px

关于哪个值是高度以及哪一个是宽度，设备的方向无关紧要！

这意味着在横向模式下，浏览器会提升width = 768 px

在我看来，这是一个错误。 'width'属性应包含浏览器窗口的宽度。

现在我在网站上使用以下媒体查询：

<link rel="stylesheet" href="mobile.css" media="(max-device-width:768px) and (orientation:portrait), (min-device-width:769px) and (max-width:980px)">

效果很好。

媒体查询iPad

4 个答案: