CSS媒体查询头疼

Question

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

我的iphone媒体查询出错（纵向）。

以下是我的疑问：

适用于大型显示​​器

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

对于不那么大的显示器

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

对于ipads以及当窗口很小时

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

AND - 只是在最后一个音符上，当我缩小我的Mac上的浏览器窗口时它显示得很好（应该如此），问题出在iphone上 - 我试过iphone 5和3S

Answer 1

将此代码用于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)

Answer 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) {}

Answer 3

神奇的数字是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)