Kommentare zu: Websites mit CSS3 Media Queries für iPhone, iPad, Android & Co. optimieren

Von: Axel

Axel — Tue, 07 May 2013 07:23:09 +0000

Hallo,
vielen Dank für dieses gute Tutorial, mit dem ich erreichen konnte, dass sich unsere Seite jetzt automatisch auf das jeweilige Gerät anpasst :-)!
Ich habe allerdings noch einen Schönheitsfehler: Wenn ich die Seite mit einem Android-Browser öffne, erscheint anfänglich nicht die mobile Version.
Erst wenn ich die Seite neu lade oder eine weitere Seite über das Menü aufrufe, wechselt die Ansicht.
Woran kann das liegen?
Vielen Dank für Antowrt.
Axel

Von: Mario

Mario — Thu, 02 May 2013 19:23:41 +0000

Sieh an – auch die ARD hat Jonas DVD (wenigstens zum Teil) verinnerlicht und ist nun recht flexibel – schöne Sache das :-)

Von: Responsive Dropdown Menü mit CSS und Jquery erstellen, in Verbindung mit dem Superfish Menü | TechNews

Thu, 02 May 2013 08:10:18 +0000

[...] zu ändern oder zu aktivieren. Darauf möchte ich jetzt aber nicht besonders eingehen, da es dafür sehr viel bessere Erklärungen [...]

Von: Jonas Hellwig

Jonas Hellwig — Tue, 30 Apr 2013 09:23:31 +0000

Hallo Bernd, die fehlende Lektion steht bereits hier zum Download bereit. Vielen Dank für dein Feedback! Es freut mich, dass dir das Training gefällt. :)

Von: Bernd

Bernd — Tue, 30 Apr 2013 08:06:24 +0000

Erst einmal: Super tolles Video!
Endlich habe ich es mal so richtig verstanden!
Danke!
Leider ist im Kapitel 8.2. des Responsive Webdesign Videos ein Fehler unterlaufen. Dort wird das Kapitel 7.2. wiederholt, sodass man leider nicht den geplanten Aufbau der Site sehen kann und damit die Einführung und Begründung verpasst.
Ich denke du solltest das Kapitel bei der nächsten Auflage der DVD verbessern und uns “Geschädigten” das Kapitel zum Download zur Verfügung stellen. Bei 36.90€ ist das doch ein bisschen ärgerlich.

Von: Jonas Hellwig

Jonas Hellwig — Mon, 22 Apr 2013 06:00:08 +0000

Die Pixelangabe funktioniert auch auf modernen Geräten ohne Einschränkung. Mehr dazu findest du im Artikel zum Thema Retina-Optimierung. Der technische Hintergrund ist identisch.

Von: Pete

Pete — Sun, 21 Apr 2013 13:11:12 +0000

Erst einmal vielen Dank für das Tutorial. Mit dieser Hilfe konnte ich meine Webseite “mobile” machen.
In letzter Zeit kommen Geräte mit immer höherer Auflösung auf den Markt. Z.B. das Galaxy S3 mit 1280px x 720px. Bisher nutze ich zur Unterscheidung von PC, Tablet, Smartphones die Media Querie max-width Eigenschaft mit Pixelangaben. Dies scheint für diese neuen Geräte jedoch nicht mehr zu funktionieren.

@media only screen (max-width: 2000px){PC}
@media only screen (max-width: 1024px){Tablet}
@media only screen (max-width: 780px){Smartphone}

Das S3 würde ja nun unter max width 1024 fallen.

Gibt es dazu bereits Abhilfe?

Von: Responsive Design: Ressourcen und Beispiele - //SEIBERT/MEDIA Weblog

Responsive Design: Ressourcen und Beispiele - //SEIBERT/MEDIA Weblog — Mon, 18 Mar 2013 07:23:40 +0000

[...] Websites mit CSS Media Queries für iPhone, iPad, Android & Co. optimieren [...]

Von: Thomas

Thomas — Fri, 01 Mar 2013 10:56:32 +0000

Schöne Anleitung, danke.

Von: Thomas

Thomas — Mon, 18 Feb 2013 07:08:31 +0000

OK, ich hatte gehofft, dass sich da in den letzten Jahren auch was Neues ergeben hat. Habe das Thema HTML lange nicht mehr verfolgt…
Danke

Von: Jonas Hellwig

Jonas Hellwig — Sun, 17 Feb 2013 08:38:20 +0000

Du könntest du User-Agent abfragen.

Von: Thomas

Thomas — Sat, 16 Feb 2013 22:11:54 +0000

Hallo Jonas,

ich möchte gerne erkennen, ob es sich tatsächlich um ein mobiles Device handelt, um z.B. auch die Farben zu ändern (schwarzer Hintergrund spart Energie auf dem Phone). Der Test auf die Pixelbreite reicht da bei heutigen Devices nicht mehr aus. Was kann ich tun?

Gruß
Thomas

Von: Stefan

Stefan — Fri, 08 Feb 2013 14:45:52 +0000

Hallo erstmal!
Sehr tolle und super informative Seite!

Da hab ich doch gleich eine Frage. Wie stell ich es an dass eine mobile Seite nur im Querformat gesehen werden kann? Quasi dass sich das drehen nicht auf hoch und quer auswirkt.

Vielen Dank im Voraus

Von: AmirG

AmirG — Sun, 03 Feb 2013 10:50:27 +0000

vielen vielen vielen dank, sehr hilfreicher beitrag! :D danke noch mals

Von: Sordrak

Sordrak — Thu, 31 Jan 2013 14:39:29 +0000

Vielen Dank für deine Mühe.
Habe es bisher noch nicht ausprobiert, aber das was ich bisher gelesen habe ist gut erklärt und leicht Verständlich. Werde deine Seite nun wohl öfters besuchen kommen, um mal zu schauen was es so neues gibt.

Ein angenehmes Wochenende wünsche ich.

Von: Martin

Martin — Fri, 25 Jan 2013 11:40:59 +0000

sagen wirs mal so, ich habe den code “max-device-width: 480px” statt “max-width: 480px”verwendet, seither geht es. o_O’ komische sache..

Von: Moglie

Moglie — Thu, 24 Jan 2013 14:08:04 +0000

hey,
ah ok – das hatte ich ausser acht gelassen und mir jetzt noch einmal genau angeschaut.

Das Meta-Element für den Viewport besitzt neben der Breite weitere Eigenschaften, die komma-separiert aufgelistet werden.

- initial-scale: Der Wert legt den anfänglichen Zoomgrad fest. 1.0 führt dazu, dass die Inhalte 1:1 dargestellt werden, d.h. auf einem Screen mit 320px Breite füllt eine 320px-breite Grafik die komplette Breite aus (siehe auch Screenshot oben). Dementsprechend führt z.B. 2.0 zu einer 2x-fachen Vergrößerung.

- user-scalable: Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no).

- minimum-scale und maximum-scale: Diese beiden Eigenschaft ermöglichen es, den Zoomgrad einzuschränken. Setzt man z.B. die maximale Skalierung auf 2.0, kann der Inhalt maximal 2x-fach vergrößert werden.

Dazu noch eine Frage: einige schreiben (wie du) zur unterteilung ein ; andere wiederum unterteilen es mit einem , (komma).

welche version ist jetzt die richtige?

LG Moglie (der gerne deine tutorials liest und dazu lernt)

Von: Jonas Hellwig

Jonas Hellwig — Thu, 24 Jan 2013 13:15:38 +0000

Das stimmt so nicht. Das iPhone mit Retina Display hat zwar eine höhere Auflösung, rechnet die Pixel aber intern um. Es spricht also auf die identischen Media Queries an. Schaut euch hierzu bitte folgenden Artikel an. @Martin: Hast du den korrekten Meta-Viewport verwendet? s.o.

Von: Moglie

Moglie — Thu, 24 Jan 2013 12:25:03 +0000

hey,

@Martin
dein iPhone5 hat ein RETINA DISPLAY, was soviel bedeutet wie 1px auf dem normalem display entspricht 4 auf dem retina display.
anders geagt, macht dein iPhone eine auflösung von (ich glaube) 960px. ist also kein wunder, wenn Media Queries beim iPhone5 erst über 960px angesprochen wird. das gilt für alle Retina Displays.

suche mal in den suchmaschienen mehr über Retina Display Responsive.

LG Moglie

Von: Martin

Martin — Thu, 24 Jan 2013 10:30:47 +0000

Hallo,
ich habe den folgenden Code benutzt: @media only screen and (max-width: 480px) { … }

Nach einigem hin und her konnte ich herausfinden, dass mein iPhone 5 erst bei einem max-width Wert von “1000px” die Mediaqueries annimmt. Woran kann das liegen?! :( Habe überall mit Prozentwerten gearbeitet, die auch korrekt vom Browser (Firefox) wie gewünscht angezeigt werden.

lg!
Martin

Von: Jonas Hellwig

Jonas Hellwig — Mon, 21 Jan 2013 19:08:42 +0000

Der Code wird in Dreamweaver immer rot eingefärbt. Das ist nicht als Fehler zu betrachten. Achte aber darauf den Query korrekt zu schreiben. Dein Code enthält Fehler, oder er ist nicht vollständig. Die Klammer am Ende fehlt.

@media only screen and (max-width: 480px) { ... }

Von: Jonas

Jonas — Mon, 21 Jan 2013 18:37:36 +0000

Hallo,
wenn ich in Adobe Dreamweaver den Code “@media only screen and (max-width: 480px) {” eingebe, so wird er braun markiert, was ja bedeutet, dass der Code nicht funktionsfähig ist. Ich habe das “@media only screen and (max-width: 480px) {” versucht mit deinen Inhalten zu füllen, es lässt sich aber auch von meinem iPhone wenn ich das Dokument online aufrufe nicht ausführen. Woran kann das liegen?! Muss das “@” davor ersetzt werden?

p.s.: in meinem stylesheet nutze ich bspw. das query “@font-face” problemlos.

lg!
jonas

Von: Mario

Mario — Tue, 15 Jan 2013 13:34:43 +0000

Danke Dir, Jonas! Wieder etwas dazu gelernt.
:-)

Von: Jonas Hellwig

Jonas Hellwig — Tue, 15 Jan 2013 13:05:09 +0000

Google empfiehlt RWD ausdrücklich. https://developers.google.com/webmasters/smartphone-sites/details

Von: Mario

Mario — Tue, 15 Jan 2013 12:19:05 +0000

Spider und Bots – wie reagieren die eigentlich auf responsive Webdesign? Ich meine, die geben doch keine bestimmte Auflösung vor, welche abgefragt werden könnte, oder?
Wenn ich zum Beispiel in der Ergebnisliste der Bildsuche mit den bestmöglichen Bildgrößen gefunden werden möchte – wie stelle ich das an, wenn ich eine Seite für unterschiedliche Ausgabemedien erstellt habe?
Oder wenn ich in der Ansicht für Smartphones bestimmte, vielleicht nicht so relevante Inhalte “ausblende”…