Media query zu unterscheiden desktop vom iPad im landscape-Modus

Ich Baue eine website mit responsive design. Ich muss unterscheiden layout zwischen tablet im landscape-Modus und desktop-Computer mit media queries. Dies sind die media queries jetzt:

<link href="base.css" rel="stylesheet"/>
<link href="desktop.css" 
media="only screen and (min-width: 801px)" rel="stylesheet"/>
<link href="tablet.css" 
media="only screen and (min-width: 629px) and (max-width: 800px) and 
(orientation:portrait), 
only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

Problem ist, dass desktop.css enthalten ist für tablets im landscape-Modus. iPad im Querformat ist 1024px breit, das ist eine gemeinsame resolution für den PC. Wie mit den media queries kann ich unterscheiden 1000px weit dekstop aus einem tablet im landscape-Modus?

P. S. ich habe mit media queries becasue der website zwischengespeichert wird/CDNed und so weiter. Jede server-side-Erkennung funktioniert nicht.

P. S. 2. 

<link href="desktop.css" 
media="only screen and (min-width: 801px), 
not only screen and (min-height:629px) and (max-height:800px) and 
(orientation:landscape)" rel="stylesheet"/>

nicht das Problem zu beheben.

  • Ich habe 'device-aspect-ratio" - Funktion. Es sollte höher sein als 1 für desktop und kleiner als 1 Tabletten. Ich werde es testen, jetzt.
  • Nicht getestet auf verschiedenen Browsern noch nicht, aber ich habe das Problem mit: <link href="desktop.css" media="only screen and (min-width: 801px) (min-device-aspect-ratio: 1/1)" /> Nun desktop.css in nicht-Landschaft-iPad.
  • Das ist cool. Werden Sie erkennen, wenn es von einem mobilen Gerät durch die min-device-aspect-ratio? Ist das so können Sie Stil, getrennt für die Geräte und desktop? Die Frage würde mehr motivation haben zu beantworten, wenn wir wüssten, warum Sie wollten, zu differenzieren. Zum Beispiel, "ich will wissen, wenn ich einen viewport von 1000px auf tablet und desktop, so kann ich das layout der Schaltflächen größer auf Tablets" Haben Sie sich HTML5 Boilerplate? Immer viele nützliche Sachen dort.
  • Ich bin nicht die Erkennung von mobilen Geräten mit min-device-aspect-ratio. Erkennung desktop ist genug für mich. Und ja, ich habe verschiedene design für tablets und für den desktop. Verschiedene design -, und andere Art und Weise zu Blättern. Große Tasten für Maus und keine Tasten, nur finger-touch scrolling für tablets.
  • Es wäre besser, anpassen für die touch-fähigen Geräte, indem Sie Tests für diese Funktion anstelle einer Prüfung für Bildschirmgröße/Seitenverhältnis und unter der Annahme touch. Siehe Modernizr für Informationen zu tun.
  • Rückgängig gemacht werden. Ich möchte dienen, Recht layout vor JS ausgeführt wird.

InformationsquelleAutor Tomasz Jureczko | 2011-11-16
  1. 4

    Plane ich zu verwenden Detectizr, ein plugin für Modernizr

    https://github.com/barisaydinoglu/Detectizr

    E. g.

    //adds html class: 'desktop', 'tablet' or 'mobile' to aid styling
Modernizr.Detectizr.detect({ detectDeviceModel: false, detectScreen: false, detectOS: false, detectBrowser: false, detectPlugins: false });

//hack: for some reason, modernizr is chopping off the 'mobile' part off the 'ui-mobile' class needed by jquery mobile
$("html").removeClass("ui-");
$("html").addClass("ui-mobile");

    Ende mit einem html-tag suchen so etwas wie dieses:

    <html lang="en" class="js tablet ui-mobile    landscape">

    Und die Nutzung der Klassen - "desktop" und "tablet" zu Hilfe styling

    InformationsquelleAutor Adam Marshall
Schreibe einen Kommentar