媒体查询不工作768px iPad的肖像

Question

我的媒体查询不是为768px iPad的画像工作。

如果我改变最小宽度完美的作品，但是当上桌面版或一些其它分辨率会影响大小超过769px

@media only screen and (max-width: 768px) { 
    .sidebar-container.pressed .content-container { 
    width: 93% !important; 
    } 
} 

有人可以解释我说，和帮助怎么解决？我只想让它在768px上工作。

感谢

Answer 1

对于纵向模式的iPad通常最好是在媒体查询更具体的，所以尝试这样的事：

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 
    /* Styles Here */ 
} 

这样，你的目标与屏幕设备768px和1024px这是iPad之间有什么宽度，那么您可以通过指定的方向为纵向筛选你的目标。

您可以尝试这样的事情 - 减少max-width - 尽量减少可能会影响的其他屏幕，但我没有尝试过，因此无法验证它是否有效。

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 770px) 
and (orientation : portrait) { 
    /* Styles Here */ 
} 

Answer 2

iPhone 6传媒查询

/* iPhone 6 in portrait & landscape */ 
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */} 

/* iPhone 6 in landscape */ 
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

/* iPhone 6 in portrait */ 
@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

iPhone 6 Plus介质查询

/* iPhone 6 Plus in portrait & landscape */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */} 

/* iPhone 6 Plus in landscape */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

/* iPhone 6 Plus in portrait */ 
@media only screen 
and (min-device-width : 414px) 
and (max-device-width : 736px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

iPhone 5 & 5S媒体查询

/* iPhone 5 & 5S in portrait & landscape */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) { /* STYLES GO HERE */} 

/* iPhone 5 & 5S in landscape */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

/* iPhone 5 & 5S in portrait */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

iPhone 2G，3G，4，4S媒体查询 这是值得注意的是，这些媒体查询也适用于iPod touch一代1-4相同。

/* iPhone 2G-4S in portrait & landscape */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { /* STYLES GO HERE */} 

/* iPhone 2G-4S in landscape */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

/* iPhone 2G-4S in portrait */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

ipad公司

/* iPad in portrait & landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { /* STYLES GO HERE */} 

/* iPad in landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */} 

/* iPad in portrait */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ } 

的iPad 3 & 4媒体查询

/* If you're looking to target only 3rd and 4th generation Retina iPads (or tablets with similar resolution) to add @2x graphics, or other features for the tablet's Retina display, use the following media queries. */ 

/* Retina iPad in portrait & landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} 

/* Retina iPad in landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */} 

/* Retina iPad in portrait */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ } 

的iPad 1 & 2媒体查询

/* If you're looking to supply different graphics or choose different typography for the lower resolution iPad display, the media queries below will work like a charm in your responsive design! */ 

/* iPad 1 & 2 in portrait & landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){ /* STYLES GO HERE */} 

/* iPad 1 & 2 in landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} 

/* iPad 1 & 2 in portrait */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } 

iPad的迷你

/* iPad mini in portrait & landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} 

/* iPad mini in landscape */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */} 

/* iPad mini in portrait */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) 
and (-webkit-min-device-pixel-ratio: 1) { /* STYLES GO HERE */ } 

来源： http://stephen.io/mediaqueries/#iPad