[Toxuas]

Moin,habe vor eine Webseite für Handys fit zumachen.
Folgendes Problem: Mit folgenden Querys spreche ich alle Handys an:[HTML]

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:852px)" href="../sandbox/css/phone_landscape.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-height:852px)" href="../sandbox/css/phone_portrait.css">

Problem ist allerdings,sobald jemand ein Input Feld benutzt wird durch die Handy Tastatur die Orientation in Android Handys von Portrait zu Landscape geändert -.-
Ich möchte nun die Abfrage verbessern und eine min/max aspect-ratio Abfrage machen damit nciht die Landscape Css geladen wird sobald jemand bei Portrait ein Input Feld auswählt.

Nun meine Frage wie muss das aussehen also wie ist das Verhältnis bei den meisten Handys im Quer/Längsformat ?

[cloned]

Zitat von Toxuas

also wie ist das Verhältnis bei den meisten Handys im Quer/Längsformat ?

Das kann man so pauschal nicht sagen, was du suchst ist der Zusatz orientation (landscape/portrait) im mediaquery. Auch solltest du besser nicht verschiedene Einheiten mischen bei den mediaqueries (width/height) sondern bei einer bleiben. Es ist in 99% der Fälle ausreichend, wenn du nur mit width und ohne orientation oder ähnlichem arbeitest.

[Flocke]

Bei Deinem Beispiel fallen mir mehrere Sachen auf, die Du ändern solltest.

1. Pack Deine Mediaqueries alle in ein CSS. Jeder Browser läd sowieso ALLE Stylesheets, er könnte sie ja vielleicht im Kriegsfalle gebrauchen.
2. Die Anzahl der Mediaqueries in einem CSS ist recht egal. Es hat mal jemand einen Test mit 3000 Queries gemacht. Die hatten keine Auswirkung auf die Performance.
3. 852px ist eine ordentliche Breite. Das sind keine Smartphones mehr, das sind Tablets.
4. Dein eigentliches Ansinnen ist aber, die "Orientation" mit hinzuzugeben, also hochkant oder horizontal. Also bspw.:

@media (min-width: 700px) and (orientation: landscape) { ... }

Interessante Links zum Thema sind:
SELFHTML und MDN.