Responsives Design: Media-queries für Retina-Displays

[TobiW]

Hallo Leut,

 

ich schraube gerade an meiner neuen Webseite und habe nun einige Media-Queries in der Form

@media (max-width:1150px) {
    // Zeug …
}

angelegt und zwar so, dass es beim Desktoprechner bei Verkleinerung des Fensters an den passenden Stellen zum nächsten Layout springt, allerdings stoße ich nun auf das Problem, dass Retinabildschirme (wie mein iPhone 4S) das falsche Layout wählen, weil die ja doppelt so viele echte Pixel haben. Ich bin eigentlich davon ausgegangen, dass das iPhone das weiß und entsprechend alle Pixelangaben verdoppelt – so hab ich das mal gelesen – aber das ist scheinbar nicht der Fall. Wie muss ich denn meine Queries anpassen, damit die auch mit Rentinageräten funktionieren?

 

Viele Grüße aus dem Zug

Tobi

[Ralf Herrmann]

Hier wird das alles in Deutsch erklärt:

http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen

Je nach Browser, den du benutzt, siehst du vielleicht auch eher das auch im Artikel genannte Initial-Scale-Problem. 

[lars.schwarz]

hierzu musst Du mit dem pixel ratio arbeiten, also z.B.

 

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) { 
    /* Retina */
}

[TobiW]

Nabend

 

danke Ralf, das was genau der richtige Hinweis hier die Zeile, die mein Problem gelöst hat:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Kann ich davon ausgehen, dass das auch mit Android-Geräten funktioniert? Da habe ich selber nämlich keins zum Testen.

 

Lars, das hatte ich schon gefunden, aber damit kann ich ja nur die Auflösung abfragen und nicht beeinflussen, wie das Gerät die Pixel interpretiert. Mein Problem war aber eh das mit der initialen Skalierung – scheints.

 

Gute Nacht!

[Sebastian Nagel]

Die CSS-Queries für die Pixeldichte sind eher nützlich für hochauflösende Bilder, nicht um generell den Viewport richtig einzustellen, insofern ist hier die <meta>-Angabe das Richtige.

 

Generell funktioniert das auch auf Androids – in 97% der Fälle ...  (das viewport-meta funktioniert auf jeden Fall).

 

Natürlich ist Android-Chrome nicht exakt gleich wie iOS-Safari, und der Teufel liegt in den hersteller-abhängigen Unterschieden, aber Google unterstützt eine Weile lang auch die Befehle die mit "apple" beginnen (z.B. die Metatags für webapp-Icons etc.), will den Support aber irgendwann in Zukunft einstellen. Bis dahin sollte (hoffentlich) eine herstellerneutrale Notation durchgesetzt sein.

Google hat gute Dokumentationen zum Thema, die zwar eher in Richtung Webapp-Entwicklung gehen (und für Webseiten vielleicht etwas zu weit), da aber die zugrundeliegende Technik die selbe ist, auch für Webseiten die im Browser laufen nicht falsch sind.

[TobiW]

Nabend, danke für die Ergänzung und den Link!

 

Das mit den hochauflösenden Bilder geht aber (auf diese Weise) nur bei externen CSS.Dateien bzw. in <style> liegenden Definitionen, oder? Mit anderen Worten ich kann nicht, wenn ich das Hintergrundbild eines Element – aus meiner Meinung nach sinnvollen Gründen – inline mit style="…" setze, auf die Queries zugreifen und müsste dann eine andere Lösung für Retinas finden, oder?

 

Gute Nacht!

Tobi

[Sebastian Nagel]

Ohne jetzt länger nachgeforscht zu haben:

Ich denke nicht dass media-querys direkt am HTML-Element im style-Attribut funktionieren. Du müsstest also damit in einen <style></style>-Bereich gehen oder in eine externe CSS-Datei.

 

Defacto-direkte Zuweisungen zu einem bestimmten Element kannst du über die Element-ID machen, also <div id="abc"> in HTML und #abc { } in CSS.

Das ist (außer du bist in einer sehr kruden Produktionsumgebung wie einem CMS wo du keinen Zugriff auf die CSS-Dateien hast) die vermutlich sinnvollste Lösung für diesen Fall; dein HTML-Markup bleibt sauber und ohne Formatangaben, im CSS-Teil kannst du Hintergrundbilder medienspezifisch einsetzen.

[TobiW]

Ah … das mit den Iss ist eine gute Die … daran hatte ich noch nicht gedacht. Der Anwendungsfall sind „Stimmungsbilder“, die jeweils im Hintergrund der Hauptüberschrift (h1) einer Unterseite liegen sollen und eben auf jeder Unterseite ein anderes Bild. Außerdem gibt es noch vier Teaserboxen zu bestücken, bei denen das Bild hinter der Überschrift liegt.

Ist es für diese Fälle schlau das Bild mit CSS einzufügen oder besser in HTML und dann mit CSS nur beide Elemente (Bild+Überschrift) übereinander legen. Ich schreibe ja grad an meiner neuen Seite und hab son Bisschen das Problem, das zwar alles gut funktioniert ich aber nicht weiß, wie umwegig meine Lösungen so sind …

[Sebastian Nagel]

:) Schwierige Frage ...

 

CSS kann ja im Grunde nur Hintergrundbilder einbauen (sozusagen als Stilelement), keine Bilder im Sinne eines Seiteninhaltes. Das wäre in deinem Fall ("Stimmungsbild im Hintergrund") vermutlich aber erstens einfacher umzusetzen, und semantisch sogar korrekt (sofern du dich da überhaupt an einen sauberen Aufbau halten möchtest).

 

Derzeit ist es halt so, dass du ohne zu großen Spagat nur über die CSS-Mediaqueries verschiedene Bildschirmauflösungen mit verschiedenen Bildqualitäten beliefern kannst.

In HTML5 ist so ein "Multi-Bild-Element" mit verschiedenen Bildquellen für verschiedene Ausgabegrößen statt dem bisherigen <img>-Tag in Diskussion und Entwicklung, aber längst noch nicht implementiert.

Lösungen für Inhaltsbilder sind zwar möglich, basieren aber auf mehr oder weniger schlauen Javascript-Bibliotheken – da spricht im Grunde nichts dagegen, aber man kommt halt in der Implementierung oft in einen Bereich, wo man den Wald vor Bäumen nicht mehr sieht, wenn das nicht das Tagesgeschäft ist ...

 

 

In deinem Fall wäre es also wohl etwa so (ungetestet, als Skizze zu verstehen):

 

in HTML hast du ein Überschriftselement, das so aussehen könnte:

<h1 id="Sonnenuntergang">Das ist die Überschrift</h1>

in CSS hast du dieses Format dafür:

#sonnenuntergang {
height:200px;
color:white;
background-image:url('sonnenuntergang_LD.jpg');
}

und in den mediaquery-bereichen des CSS dann nochmal das überschreibende Format

@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) { 
   #sonnenuntergang {
      background-image:url('sonnenuntergang_HD.jpg');
   }
}

[Sebastian Nagel]

Statt IDs kannst du übrigens auch mit Klassen arbeiten (IDs sind eher für Scripting angeraten):

 

<h1 class="sonnenuntergang">asdf</h1>  und  .sonnenuntergang { }

 

Das ist für dieses Problem eigentlich gleichwertig, du kannst hier auch mehrere Klassen kombinieren (class="textweiss sonnenuntergang") und hast weniger CSS-Hiearchieprobleme zu befürchten.

 

In meinem Beispiel müsstest du dann die weiße Textfarbe für dunkle Hintergrundbilder nicht mehrfach deklarieren, sondern kannst sie nach bedarf als zweite Klasse anlegen und im HTML-Code als Klasse zuschalten wenn nötig.

[TobiW]

Moin

 

spür danke dir. Klar will ich – als eingefleischter LaTeX-Mensch – saubere Struktur und fand deswegen die Lösung über CSS Hintergründe nicht verkehrt. Ich werde mir das mal überlegen und auch nochmal nach den diversen Skripten Ausschau halten, die derlei Ersetzungen automatisch machen, denn ich hab auch noch ein paar SVG-Grafiken, die einen Fallback brauchen (oder?). Hättest du dafür (Autoretina für alle Bilder und SVG-Fallback) noch einen Tip, welchen Skript ich nehmen kann. Bisher komme ich auf der Seite ohne jQuery aus und hab nur ein paar benz leichtgewichtige Skripte drin. Modernizr scheint mir auch etwas Overkill zu sein …

[Sebastian Nagel]

Ich habe bisher nur darüber gelesen, aber bisher keinen Bedarf gehabt das bis in eine Produktionsstufe durchzuziehen ... somit ist mein Wissen nur soweit, dass ich weiß nach was ich suchen muss wenn ich es denn mal brauche :)

 

Zum Einlesen:

Dieser Beitrag ist kein schlechter Einstieg und mit Ende-November 2013 recht aktuell.

Dieser hier ist vom April 14, aber spezifisch für Wordpress – trotzdem interessant als Startpunkt.

[TobiW]

Danke! Das werde ich mir mal zu Gemüte führen und euch dann zu gegebener Zeit wieder auf den Keks gehen damit