目标移动设备与CSS（iPad，iPhone），但排除非移动设备

我试图针对移动设备（特别是iPad和iPhone），但使用CSS3媒体查询相同的样式添加到相同的其他设备分辨率，如笔记本电脑。如何添加移动设备特定样式而不将其添加到其他非移动设备？目标移动设备与CSS（iPad，iPhone），但排除非移动设备

到目前为止我使用这一点，它增加了对CSS是1,024像素宽下的所有设备，甚至与方向选择：

@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 
}

来源

2012-04-11 mmmoustache

也许看看this，在部分“7.3公认的媒体类型”，会帮助你。

来源

2012-04-11 08:53:45

感谢您的提示，这似乎适用于横向模式，但纵向模式被忽略！任何想法为什么会发生这种情况？我简直就是在上面的代码中只换了'只有手机'的'屏幕'。 – mmmoustache 2012-04-11 10:10:43

我看到你编辑你的问题并自己回答，但你可能有兴趣使用最小宽度和最大宽度，而不是min-device-width和max-device-width。 – 2012-04-11 15:12:46

是的，你的答案真的有帮助！我会给你一个镜头，听起来像我需要整理代码。再次感谢！ – mmmoustache 2012-04-11 15:47:24

是：desktop browsers support the orientation media query too。

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

什么让你的风格不适合非iPad设备？

来源

2012-04-11 09:14:41

啊，那就是为什么！不幸的是，对我来说，设计师设计的网站是1040px宽，所以我只需要调整css – mmmoustache 2012-04-11 10:12:48

@mmmoustache：doh，这很令人沮丧。我建议只针对宽度 - 那些支持媒体查询的浏览器的用户将浏览器窗口的大小减少到1040以下，也可以从您的调整后的样式中受益。 – 2012-04-11 10:53:19

我发现，你需要的是在你编辑的第二个媒体查询：

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

它的工作就像一个魅力！

来源

2015-08-27 00:28:36

目标移动设备与CSS（iPad，iPhone），但排除非移动设备

回答

相关问题