Ziel Mobilgeräte mit CSS (iPad, iPhone), aber nicht mobile Geräte ausschließen

Ich versuche, mobile Geräte (speziell das iPad und iPhone) zu zielen, aber mit CSS3 Medienabfragen wird das gleiche Styling zu anderen Geräten mit dem gleichen hinzugefügt Auflösung, wie Laptops. Wie kann ich ein mobilgerätspezifisches Styling hinzufügen, ohne es anderen nicht mobilen Geräten hinzuzufügen?Ziel Mobilgeräte mit CSS (iPad, iPhone), aber nicht mobile Geräte ausschließen

Bisher bin ich mit dieser, die die CSS auf alle Geräte hinzufügt, die 1024px breit und unter, auch mit der Ausrichtung Wähler sind:

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
         (max-device-width: 1024px) and (orientation:landscape){ 
      // Do something 
}

EDIT: Für alle Interessierten, ich habe Dies funktioniert nur, indem Sie die Medienabfrage duplizieren, aber das Duplikat leicht ändern. Es ist bei weitem die effizienteste Art und Weise, es zu tun, aber die Hauptsache ist, es funktioniert:

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
        (max-device-width: 1024px) and (orientation:landscape){ 
     // some styling 
} 

@media only screen and (min-device-width: 320px) and (orientation:portrait), 
        (max-device-width: 768px) and (orientation:portrait){ 
     // some styling 
}

Quelle

2012-04-11 mmmoustache

Vielleicht ein Blick auf this, an dem Abschnitt „7.3 Anerkannte Medientypen“, werden Ihnen helfen.

Quelle

2012-04-11 08:53:45

Danke für den Tipp, das scheint für den Querformatmodus zu funktionieren, aber der Hochformatmodus wird ignoriert! Irgendwelche Ideen, warum das passieren könnte? Ich habe buchstäblich nur "Bildschirm" für "nur Handheld" im obigen Code ausgetauscht. – mmmoustache

Ich sehe, dass Sie Ihre Frage bearbeitet und sich selbst geantwortet haben, aber Sie könnten daran interessiert sein, min-width und max-width anstelle von min-device-width und max-device-width zu verwenden. –

Ja, deine Antwort hat wirklich geholfen! Ich gebe das eine Chance, klingt, als müsste ich den Code aufräumen. Danke noch einmal! – mmmoustache

Yup: desktop browsers support the orientation media query too.

Ich glaube nicht, Medienabfragen bieten eine Möglichkeit zu erkennen, ob ein Gerät das iPad oder das iPhone ist. Sie ermöglichen es Ihnen, Merkmale des Geräts (wie Breite und Ausrichtung) zu überprüfen, anstatt das Gerät zu identifizieren.

Was macht Ihre Styles für Nicht-iPad-Geräte ungeeignet?

Quelle

2012-04-11 09:14:41

Ahh, das ist warum! Leider hat der Designer die Seite so entworfen, dass sie 1040 Pixel breit ist, also muss ich nur die CSS-Datei optimieren: – mmmoustache

@mmmoustache: Doh, das ist frustrierend. Ich würde vorschlagen, nur die Breite zu targetieren - Benutzer mit Browsern, die Medienabfragen unterstützen, die die Größe ihres Browserfensters auf unter 1040 reduzieren, werden ebenfalls von Ihren optimierten Stilen profitieren. –

fand ich, dass alles, was Sie brauchen die zweite Medienabfrage in Ihrem bearbeiten ist:

@media only screen and (min-device-width: 320px) and (orientation: portrait), 
    (max-device-width: 768px) and (orientation: portrait) { 
    // some styling 
}

Es arbeitete wie ein Charme!

Quelle

2015-08-27 00:28:36

Ziel Mobilgeräte mit CSS (iPad, iPhone), aber nicht mobile Geräte ausschließen

Antwort

Verwandte Themen