wake-up-neo.net

Medienabfragen - Css nur für iPhone Landscape

Gibt es die gleichen Methoden, um css nur für das iPhone im Querformatmodus zu schreiben? Vielen Dank

14
Dee

Sie könnten das tun

<meta name="viewport" content="width=device-width, 
    minimum-scale=1.0, maximum-scale=1.0">

Dadurch wird das iPhone gezwungen, das Ansichtsfenster mit der Gerätebreite zu rendern.

Verwenden Sie dann diese CSS, um auf den Querformatmodus zuzugreifen, der +320px breit ist 

@media screen and (min-width: 321px){
    //styles
}
14
Jason Gennaro

Ja sicher. Überprüfen Sie: http://www.w3.org/TR/css3-mediaqueries/#orientation

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

Wenn Sie nur das iPhone als Ziel verwenden möchten, müssen Sie die Auflösung oder die dppx-Dichte zu diesem MQ hinzufügen.

26
Mattia Astorino

Wenn ich Sie richtig verstanden habe und Sie möchten, dass die Medienabfragen ein Smartphone wie das iPhone nur dann anvisieren, wenn es horizontal gehalten wird, versuchen Sie Folgendes:

@media only screen and (min-width: 480px) and (max-width: 767px) {
    /* styles go here */
    body {

    }
}
5
ajsharma

eigentlich wenn du verwendest:

<meta name="viewport" content="width=device-width, 
minimum-scale=1.0, maximum-scale=1.0">

dann verhindern Sie, dass der Benutzer zu jeder Zeit zoomt, was zu Problemen bei der Benutzerfreundlichkeit führen kann. 

Ich würde dir empfehlen zu verwenden:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

In diesem Fall erzwingen Sie, dass Ihre Seite im ursprünglichen ursprünglichen Maßstab angezeigt wird, und Sie können dann mit Ihren Medienabfragen unterschiedliche Layoutgrößen anvisieren, da die Größe des Layouts geändert wird, wenn Sie Ihr iPhone drehen:

@media only screen and (min-width: 480px) {
    /* landscape mode */
}

@media only screen and (max-width: 479px) {
    /* portrait mode */
}

Und der Benutzer kann die Seite immer noch zum Zoomen pressen.

1
Nicolas Lagarde