Wie kann man iPads ausschließlich mit CSS-Medienabfragen ansprechen?

Ausschließliches Targeting des iPad mit CSS-Medienabfragen

Das Targeting bestimmter Geräte mit CSS-Medienabfragen kann eine Herausforderung sein, insbesondere wenn Geräte ähnliche Bildschirmabmessungen haben. Um das iPad zu isolieren, ziehen Sie die folgenden Ansätze in Betracht:

Verwenden von Gerätebreite und Gerätehöhe:

Die bereitgestellte Medienabfrage kann durch Angabe sowohl der Gerätebreite als auch verfeinert werden Höhe, die nur für das iPad gilt:

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

Kombination von Gerätebreite und Auflösung:

Alternativ können Sie Gerätebreite und Geräteauflösung kombinieren:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (min-resolution: 132dpi)

Verwenden von Medienabfragen, die mit bestimmten Stylesheets verknüpft sind:

Für eine bessere Effizienz können Sie separate, auf das iPad zugeschnittene Stylesheets erstellen und diese bedingt auf der Grundlage gerätespezifischer Medien einbinden Abfragen:

<code class="html"><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: 1024px) and (device-height: 768px) and (orientation:landscape)" href="ipad-landscape.css" /></code>

Medienabfragen in CSS integrieren:

Um HTTP-Anfragen zu reduzieren, können Sie gerätespezifische CSS-Regeln in Ihrem Haupt-Stylesheet definieren:

<code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
  .ipad-portrait { color: red; }
}</code>

Das obige ist der detaillierte Inhalt vonWie kann man iPads ausschließlich mit CSS-Medienabfragen ansprechen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!