2016-11-24 1 views
0

Ich habe eine Webseite, die richtig für ein iPhone 6 anzeigt. Gibt es eine einfache Möglichkeit, die Bildschirmgröße mit einer Medienabfrage für ein iPhone 5 anzupassen, so wird alles richtig schrumpfen?Adjust media query to handle iphone 5

Ich weiß, wie CSS für ein iPhone 5 auslösen, was ich suche, ist eine Möglichkeit, einfach CSS einzurichten, so ist es nur ein CSS-Befehl für das iPhone 5 zu formatieren. Nehmen wir an, Sie haben alles funktioniert für eine Iphone 6, könnten wir nur eine reduzierte Breite für Iphone 5 einstellen und alles automatisch verkleinern?

Antwort

0

Nur iPhone 5 (Portraitmodus)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait) 
{ 
    ... 
} 

Nur iPhone 5 (Landschaftsmodus)

@media only screen and (min-device-width: 320px) and (max-device-width: 568px) 
and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape) 
{ 
    ... 
} 

Ein weiteres nützliches Feature ist Medien

device-aspect-ratio 

Beachten Sie, dass das iPhone 5 kein Seitenverhältnis von 16: 9 hat. Es ist in der Tat 40:71.

iPhone 5: 
@media screen and (device-aspect-ratio: 40/71) {}