CSS媒体查询头痛答案

【问题标题】：CSS media query headacheCSS媒体查询头痛
【发布时间】：2014-10-16 16:44:15
【问题描述】：

正如我之前所说：**业余警告**

我的 iphone 媒体查询有问题（纵向）。

这是我的疑问：

对于大型显示器

@media only screen and (min-width: 1024px) and (min-height: 861px)

对于不太大的显示器

@media only screen and (min-width:1024px) and (max-height:860px)

适用于 ipad 和窗口较小时

@media only screen and (min-width:760px) and (max-width:1023px), screen and (min-device-width: 768px) and (max-device-width: 1024px)

适用于 iPhone（3 及以上）

@media screen and (max-width:759px) and (orientation: portrait), screen and (max-device-width: 767px) and (orientation: portrait)

我的 iphone（横向）触发 ipad 和小窗口查询...有什么建议吗？

我希望 iphone 在横向时触发“ipad”css，但在纵向时触发 iphone css。

并且 - 最后一点，当我在我的 Mac 上缩小浏览器窗口时，它显示良好（应该如此），问题出在 iPhone 上 - 我在 iphone 5 和 3S 上尝试过

【问题讨论】：

你看过这个site吗？
如果你的意思是stackoverflow，是的，相当...
让我让自己比我第一条评论中的超链接更清楚。 css-tricks.com/snippets/css/media-queries-for-standard-devices
哈！是的...有时会有所帮助...是的，正如该站点中所建议的那样，我替换了我的iphone媒体查询并用我的ipad和iphone查询慢跑，但仍然没有运气-我想知道的是为什么我的ipad在我的 iphone 上触发查询 - 为什么我的参数错误
在您的 iPhone 查询中，我注意到您在 @media 和 screen 之间缺少一个 only 关键字。你在你的实际代码中检查过吗？

【解决方案1】：

神奇的数字是 568 像素 - 这是 iphone 似乎有其最大设备宽度的阈值，无论您使用的是 iphone 3。

所以发生的事情是我的阈值是 768...

这些是我对 iphone 肖像的最终查询：

screen  and (max-device-width : 568px) and (orientation:portrait)

对于其余部分，我之前在这些参数中展示的内容：

screen  and (min-device-width : 569px), (max-device-width : 568px) and (orientation:landscape)

【讨论】：

【解决方案2】：

尝试以下方法，这对我有用：

1 - 将此标签添加到您的 html 头部：

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

2 - 为 iPhone Portrait 添加此媒体查询：

@media screen and (max-width: 360px) {}

3 - 为 iPad 和 iPhone 横向添加此媒体查询：

@media screen and (max-width: 800px) {}

【讨论】：

【解决方案3】：

将此代码用于 iPhone 5 媒体查询：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px)

如果要支持人像：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait)

对于风景：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape)

【讨论】：