Beim „Responsive Webdesign“ werden unter Verwendung von neuesten Webstandards wie HTML5 und CSS3 die Webseiteninhalte entsprechend der erkannten Endgeräte layoutmäßig dahingehend ausgegeben, dass immer eine optimale Darstellung und Lesbarkeit gewährleistet ist. Dies wird insbesondere durch sogenannte Media-Queries ermöglicht. Diese laden abhängig von der Browsergröße verschiedene CSS-Parameter, welche dann sogar live ohne Reload beim Verändern des Browserfensters greifen. Oft wird hier fälschlicherweise Javascript vermutet was jedoch meistens nicht erforderlich ist. Entgegen des Artikels bei Wikipedia gibt es z. Zt. jedoch keine Technologie um die „Größe des Gerätes selbst“ zu ermitteln. Es kann lediglich die Bildschirmauflösung ermittelt und als Maßstab weiter genutzt werden. Dies betrifft dann allerdings beispielsweise ein Iphone im Landscapemodus genauso wie ein Desktop-Browserfenster, welches auf 480 Pixel Browserbreite oder weniger skaliert wurde. Der dafür verwendeten Parameter in den Media-Queries lauten device-width, sowie min-device-width und max-device-width. Somit wird mit folgendem Wert speziell das Iphone und seine Verwandten (und natürlich auch das bereits erwähnte Desktop-Browserfenster, welches auf 480 Pixel Browserbreite oder weniger skaliert wurde) angesprochen:
media=“all and (max-device-width: 480px)“
Wer hier jetzt zu meinen weiß, dass doch ein Iphone im Landscapemodus doch 960 Pixel und nicht 480 Pixel Bildschirmauflösung aufweist liegt selbstverständlich nur teilweise falsch. Das Iphone simuliert eine Display-Breite von 480 Pixel, um auf dem winzigen Display (gemessen an PC-Monitoren) alle nicht auf mobile Ausgabe optimierten Webseiten einigermaßen leserlich darzustellen!