使用 CSS 定位移动设备（iPad、iPhone），但排除非移动设备

Posted 2023-03-06

【中文标题】使用 CSS 定位移动设备（iPad、iPhone），但排除非移动设备

【英文标题】：Target mobile devices with CSS (iPad, iPhone) but exclude non-mobile devices

【发布时间】：2012-04-23 13:38:51

【问题描述】：

我正在尝试定位移动设备（特别是 iPad 和 iPhone），但使用 CSS3 媒体查询将相同的样式添加到具有相同分辨率的其他设备，例如笔记本电脑。如何在不将其添加到其他非移动设备的情况下添加移动设备特定样式？

到目前为止，我正在使用它，它将 css 添加到所有宽度为 1024px 及以下的设备，即使使用方向选择器：

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                       (max-device-width: 1024px) and (orientation:landscape)
           // Do something

编辑： 对于任何感兴趣的人，我只是通过复制媒体查询但稍微改变副本来实现这一点。这是迄今为止最有效的方法，但主要是它有效：

@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 1024px) and (orientation:landscape)
       // some styling


@media only screen and (min-device-width: 320px) and (orientation:portrait),
                   (max-device-width: 768px) and (orientation:portrait)
       // some styling

【参考方案1】：

也许看看this，在“7.3 可识别的媒体类型”部分，会对您有所帮助。

【讨论】：

感谢您的提示，这似乎适用于横向模式，但纵向模式被忽略了！任何想法为什么会发生这种情况？我实际上只是在上面的代码中将“仅屏幕”替换为“仅手持”。

我看到您编辑了您的问题并回答了自己，但您可能有兴趣使用 min-width 和 max-width 而不是 min-device-width 和 max-device-width。

是的，你的回答真的很有帮助！我会试一试，听起来我需要整理代码。再次感谢！

【参考方案2】：

是的：desktop browsers support the orientation media query too。

我不认为媒体查询提供了一种检测设备是 iPad 还是 iPhone 的方法。它们允许您检查设备的功能（例如其宽度和方向），而不是识别设备。

是什么让您的样式不适合非 iPad 设备？

【讨论】：

啊，这就是原因！不幸的是，设计师将网站设计为 1040px 宽，所以我只需要调整 css

@mmmoustache：哎呀，真令人沮丧。我建议只定位宽度 - 使用支持媒体查询的浏览器将浏览器窗口大小减小到 1040 以下的用户也将从您调整的样式中受益。

【参考方案3】：

我发现您只需要编辑中的第二个媒体查询：

@media only screen and (min-device-width: 320px) and (orientation: portrait),
   (max-device-width: 768px) and (orientation: portrait) 
   // some styling

它就像一个魅力！