媒體查詢不工作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