ipad media quaries

[jumbo125]

Sehr egeehrte community

zurzeit versuche ich meine Webseite IPAD tauglich zu gestalten. Dazu nutze ich media quaries. Obwohl ich schon unzählige Simulatoren ausprobiert habe, komme ich zu keinen Ergebnis. Mein css code:

/*ipad lanscape*/
@media screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
#gesamteseite{
width:80%;
}
}

leider verändert sich in jeden Simulator welchen ich ausprobiert habe(im Google chrome) nichts. Stimmt die media Quaries Bezeichnung nicht? Wie man sich denken kann, beschreibt die id meine gesamte Seite. Diese passt sich aber nicht an die 80% an.

Hat jemand einen Simulator tipp, wo er mit 100% sicherheit sagen kann, dass er funktioniert?

 

[scbawik]

Denke nicht dass es an deiner Media-Query liegt. Die in-browser Simulatoren sind alle samt einfach Schrott ;)

Das ist nichts weiter als ein iFrame mit der Größe eines iPads ... und wenn du einen qualitativen "Simulator" findest, hat dieser sogar noch den Rahmen des iPads, damit es "echt" aussieht ... :roll:

Also einfach direkt am Device testen, dann weißt du ob es funktioniert.

Alternativ kannst du natürlich auch die query selbst im Code auskommentieren, dann siehst du zumindest wie das Ergebnis aussehen würde.

 

[jumbo125]

Ich hab leider kein tablet

 

[scbawik]

Dann lass mal zum testen das 'orientation' weg. Ich glaube der Desktop-Browser kann damit nichts anfangen

 

[jumbo125]

Ich werde es noch in einen Emulator versuchen. Danke für den Tipp

 

[jakestyler]

iPad Media QUERIES

Diese funktionieren zu 100% - Media Querys für's iPad / Mini:

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

[B]iPad in landscape[/B]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* STYLES GO HERE */}
[B]
iPad in portrait[/B]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* STYLES GO HERE */ }
[B]
Retina iPad in portrait & landscape[/B]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */}
[B]
Retina iPad in landscape[/B]
 @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 */}

[B]Retina iPad in portrait[/B]
@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 */ }

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

[B]iPad 1 & 2 in landscape[/B]
@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 */}

[B]iPad 1 & 2 in portrait[/B]
@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 */ }

[B]iPad mini in portrait & landscape[/B]
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)and (-webkit-min-device-pixel-ratio: 1)  { /* STYLES GO HERE */} 
[B]
iPad mini in landscape[/B]
@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 */}
[B]
iPad mini in portrait[/B]
@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 */ }

Online testing of CSS Media Queries <-- Test