影响具有纵向/横向方向的任何设备的媒体查询

Question

正如标题所说，我正试图以纵向模式定位每台设备。

我目前的媒体查询：

'移动'：

@media (max-width: 639px),
@media (orientation: portrait) {}

'桌面'等：

@media only screen and (min-width: 640px) {}

出于某种原因，orientation: portrait不会影响ipad mini 2.为什么？

Answer 1

我认为您有语法错误，请尝试更好

@media (max-width: 639px), (orientation: portrait) {}

而不是重复@media指令

@media (max-width: 639px),
@media (orientation: portrait) {}

在此页面上查看针对ipad mini的更具体的媒体查询： http://stephen.io/mediaqueries/#iPadMini

Answer 2

您需要使用all定位所有设备

@media all and (orientation:portrait) {  
    /* Portrait  */  
}  
@media all and (orientation:landscape) {  
    /* Landscape */  
}

Answer 3

Ipad Mini的分辨率高于媒体查询中使用的分辨率。

此外，您不需要在每一行重复 @media 。

@media(max-width: 639px),
@media (orientation: portrait) {}

尝试：

@media (max-width: 639px) and (orientation: portrait){

}

对于ipad mini：

IPAD MINI PORTRAIT

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 1)  { 

}

您还可以更具体地定位ipad mini的更高像素密度，该密度高于Ipad：

/* ipad Mini Portrait */
@media only screen and (width:768px) and (resolution: 163dpi) {

}

/* ipad Mini Landscape */
@media only screen and (width:1024px) and (resolution: 163dpi) {

}