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

CSS-Medienabfrage: Ausschließliche Ausrichtung auf das iPad

Herausforderung:

Die gezielte Ausrichtung auf iPad-Geräte hat sich als Herausforderung erwiesen zu überlappenden Gerätebreiten mit anderen Tablets. Die Verwendung herkömmlicher CSS-Medienabfragen mit Bedingungen für die minimale/maximale Breite trennt das iPad nicht effektiv von anderen Geräten wie LG Pad und Galaxy Tab.

Lösung:

Ein Erfolg Die Lösung besteht darin, die Bedingungen für Gerätehöhe und -ausrichtung in Kombination mit der Gerätebreite zu nutzen. Die folgenden Medienabfragen isolieren Stile speziell für das iPad:

• Hochformatausrichtung:

  <code class="css">@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
    /* iPad Portrait styles */
  }</code>

• Querformatausrichtung:

  <code class="css">@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
    /* iPad Landscape styles */
  }</code>

Durch die Nutzung dieser Medienabfragen können Sie bestimmte Stile auf iPad-Geräte anwenden und gleichzeitig andere Tablets mit ähnlichen Gerätebreiten ausschließen. Um HTTP-Aufrufe zu optimieren, können Sie sie mithilfe der bereitgestellten @media-Regeln in Ihre vorhandene gemeinsame CSS-Datei integrieren.

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