CSS-Medienabfrage nur für iPad und iPad?

73

Hallo, ich arbeite mit mehreren Tablet-Geräten, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad und so weiter.

  • iPad - 1024 x 768
  • LG Pad - 1280 x 768
  • Galaxy Tab - 1280 x 800

Ich möchte das iPad nur mit einer CSS3-Medienabfrage ansprechen. Da die Gerätebreite von LG und iPad gleich 768px ist, habe ich Probleme, jedes Gerät zu trennen.

Ich habe versucht, Folgendes zu trennen, aber es scheint nicht zu funktionieren:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */
@media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */
@media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */

Ich kenne das -webkit-Gerätepixelverhältnis und andere -webkit * -Optionen und deren Werte für das iPad nicht. Ich möchte kein JavaScript für Stile verwenden, irgendwelche Ideen?

ipad css webkit media-queries Hossain Khan
quelle
Das Gerät-Seitenverhältnis funktioniert auf dem iPad, aber der richtige Wert ist 768/1024
Tom Clarkson

Antworten:

140

Endlich eine Lösung gefunden von: Verschiedene Geräteplattformen mithilfe von CSS erkennen

<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />

Um den HTTP-Aufruf zu reduzieren, kann dies auch in Ihrer vorhandenen allgemeinen CSS-Datei verwendet werden:

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; } /* your css rules for ipad portrait */
}
@media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) {
  .ipad-landscape { color: blue; } /* your css rules for ipad landscape */
}

Hoffe das hilft.

Andere Referenzen:

Hossain Khan
quelle
Nur für den Fall, dass Sie sich gefragt haben, werden die Stile geändert, wenn das Gerät gedreht wird, ohne auf Javascript zurückgreifen zu müssen.
Dave Sag
1
Alle iPads haben die gleiche Auflösung? Ich dachte, es gibt 3 Auflösungen für verschiedene Versionen. Und ich denke, es ist unmöglich vorherzusagen, ob weitere Auflösungen herauskommen werden.
Dan
Damals, als ich daran arbeitete, gab es kein iPad Mini. Ich weiß also nicht, wie hoch die Bildschirmauflösung ist. Diese CSS-Medienabfrage funktionierte jedoch für das Retina-iPad. Es ist also besser, auf tatsächlichen Geräten zu testen, um sicherer zu sein.
Hossain Khan
1
Ist die Gerätebreite nicht: 1024px, wenn Sie sich im Querformat befinden?
Mike Garcia
2
Nein, soweit ich weiß, sind diese Dimensionsinformationen für das Gerät festgelegt. Zur Orientierung haben Sie bereits orientationSelektor.
Hossain Khan
7

Ich bin etwas spät dran, um darauf zu antworten, aber keines der oben genannten hat bei mir funktioniert.

Das hat bei mir funktioniert

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    //your styles here
   }
Baig
quelle
Vielen Dank, aber beim Wechsel zwischen Quer- und Hochformat wurde es für mich chaotisch. Also musste ich hinzufügen and (orientation:portrait)und and (orientation:landscape)damit das CSS nicht zusammenstößt. Für alle, die nicht verstanden haben, was ich meinte, sah die gesamte Medienabfrage für das Porträt so aus:@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { //style }
Coco
5

Sie müssen das Gerät von seinem Benutzeragenten mithilfe eines Skripts als Ziel festlegen. Der Benutzeragent für das iPad lautet:

Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10
Beatriz Oliveira
quelle
Das Erkennen auf dem Server hat einige Vorteile. Sobald ich auf dem Server erkannt habe, würde ich dem Hauptteil der Antwort eine Klasse hinzufügen, um die CSS-Auswahl zu unterstützen.
Oren
1
Dies ist die beste Antwort. Die Erkennung bestimmter Geräte von Drittanbietern auf der Grundlage der genauen Auflösung und Ausrichtung der Bildschirmpixel ist nicht zukunftssicher und dient nicht dem Zweck von CSS. Serverseitige Benutzeragentenbrücken sind niemals eine gute Lösung, da sie diskriminierend sind. Daher sollte diese oben stehen.
Filip
1
@ FilipDalüge Dies ist bei weitem nicht die beste Antwort. Solange Sie Medienabfragen verwenden, um Probleme mit dem CSS-Abstand zu beheben, spielt es keine Rolle, ob dies zukunftssicher ist oder ob es auf anderen Geräten mit genau derselben Bildschirmgröße ausgelöst wird. Die obige Antwort zielt auf eine genaue Version von Mobile Safari ab, die im Grunde genommen nutzlos ist, da nicht einmal alle iPad-Geräte in einer einzigen Generation verarbeitet werden.
Alex W
Niemand sollte dies tun, wenn eine Medienabfrage die Arbeit erledigt. Auf jeden Fall nicht die beste Antwort.
Telarian
4

Na ganz die gleiche Frage und es gibt auch eine Antwort =)

http://css-tricks.com/forums/discussion/12708/target-ipad-ipad-only./p1

@media only screen and (device-width: 768px) ...
@media only screen and (max-device-width: 1024px) ...

Ich kann es derzeit nicht testen, bitte testen Sie es =)

Auch einige mehr gefunden:

http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

Oder Sie überprüfen den Navigator mit etwas Javascript und generieren / fügen eine CSS-Datei mit Javascript hinzu

Daniel Ruf
quelle
2 
<html>
<head>
    <title>orientation and device detection in css3</title>

    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:portrait)" href="iphone-portrait.css" />
    <link rel="stylesheet" media="all and (max-device-width: 480px) and (orientation:landscape)" href="iphone-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 1184px) and (orientation:portrait)" href="htcdesire-portrait.css" />
    <link rel="stylesheet" media="all and (device-width: 800px) and (device-height: 390px) and (orientation:landscape)" href="htcdesire-landscape.css" />
    <link rel="stylesheet" media="all and (min-device-width: 1025px)" href="desktop.css" />

</head>
<body>
    <div id="iphonelandscape">iphone landscape</div>
    <div id="iphoneportrait">iphone portrait</div>
    <div id="ipadlandscape">ipad landscape</div>
    <div id="ipadportrait">ipad portrait</div>
    <div id="htcdesirelandscape">htc desire landscape</div>
    <div id="htcdesireportrait">htc desire portrait</div>
    <div id="desktop">desktop</div>
    <script type="text/javascript">
        function res() { document.write(screen.width + ', ' + screen.height); }
        res();
    </script>
</body>
</html>
Daniel Raja Singh
quelle
1

Heutzutage können Sie mithilfe einer Funktion für Medienabfragen der Stufe 4 prüfen, ob das Gerät über Elemente schweben kann .

@media (hover: hover) { ... }

Da das iPad keinen Schwebezustand hat, können Sie Touch-Geräte wie das iPad effektiv anvisieren.

Kevinius
quelle
-1 
/*working only in ipad portrait device*/
@media only screen and (width: 768px) and (height: 1024px) and (orientation:portrait) {
  body{
    background: red !important;
  }  
}
/*working only in ipad landscape device*/
@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
  body{
    background: green !important;
  }   
}

In the media query of specific devices, please use '!important' keyword to override the default CSS. Otherwise that does not change your webpage view on that particular devices.
Vaibhavi Purohit
quelle