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

时间:2015-03-14 16:44:21

标签: css css3 media-queries

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

我目前的媒体查询:

'移动':

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

'桌面'等:

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

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

3 个答案:

答案 0 :(得分:1)

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

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

而不是重复@media指令

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

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

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

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

}