Medienabfrage funktioniert nicht für 768px ipad Porträt

Question

Meine Medienabfrage funktioniert nicht für 768px ipad Porträt.

Wenn ich für min-width ändern perfekt funktioniert, aber wirkt sich auf die Größe, wenn auf Desktop-Version oder eine andere Auflösung mehr als 769px

ist

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

Jemand kann mir erklären, dass und helfen wie löst man? Ich will nur, dass es auf 768px funktioniert.

Dank

Answer 1

Für iPads im Portrait-Modus ist es in der Regel am besten spezifischere in den Medien-Anfragen zu sein, so versuchen, so etwas wie dieses:

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

Auf diese Weise zielen Sie Geräte mit Bildschirm width zwischen 768px und 1024px was ist das iPad, dann filtern Sie Ihre Ziele durch Angabe der Ausrichtung als Hochformat.

Sie könnten etwas wie das versuchen - die max-width zu reduzieren - um alle anderen Bildschirme zu minimieren, die es bewirken könnte, aber ich habe es nicht versucht, so kann es nicht überprüfen, funktioniert.

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

Answer 2

iPhone 6 Media Queries

/* 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 Media Queries

/* 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 Media Queries

/* 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 Media Queries Es ist bemerkenswert, dass diese Medien-Anfragen sind auch die gleichen für den iPod Touch Generationen 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 Media Queries

/* 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 Media Queries

/* 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 mini

/* 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 */ } 

Quelle: http://stephen.io/mediaqueries/#iPad