Wie kann ich das iPad ausschließlich mit CSS-Medienabfragen ansprechen?

Ausschließliches Targeting des iPad mithilfe von CSS-Medienabfragen

In einer Umgebung mit mehreren Geräten kann die Isolierung bestimmter Geräte eine Herausforderung darstellen, insbesondere wenn sie gemeinsam genutzt werden ähnliche Abmessungen. Ein solcher Fall unterscheidet iPads von anderen Tablets wie LG Pads und Galaxy Tabs, die alle eine Gerätebreite von 768 Pixel haben.

Um dieses Problem anzugehen, bieten CSS-Medienabfragen eine Lösung. Herkömmliche Methoden wie Min-Device-Breite und Max-Device-Breite sind jedoch aufgrund der überlappenden Breite unwirksam.

Lösung:

Endlich eine Methode, die das Gerät nutzt height behebt das Problem:

<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" />

Diese Lösung zielt auf Geräte mit einer Breite von 768 Pixel, einer Höhe von 1024 Pixel und entweder Hoch- oder Querformat ab, wodurch iPads effektiv isoliert werden.

Um HTTP-Aufrufe zu minimieren , können die Medienabfragen in die Haupt-CSS-Datei eingebettet 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 */
}

Weitere Informationen finden Sie außerdem in den folgenden Ressourcen:

• https://developer.apple. com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html

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