Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...
bearbeitet von Matthias ScharwiesServus!
> Hallo,
>
>
> > ...dachte, meine Frage wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...
Willkommen im SELF-Forum, in dem manchmal mehr Antworten kommen als erwartet, sodass dann die Übersicht verloren geht!
>
> Warum nicht? „Arbeite mit 'em' statt 'px'“ *ist* doch ein einfacher Lösungsvorschlag!
Das Adobe-Tutorial ist gut!
SELFHTML hat im Wiki eines, das versucht die Besonderheiten des responsiven Designs herauszustellen:
* [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen)
Hier werden einfach ein paar Änderungen (die aber meist Vereinfachungen gegenüber früher sind) erklärt:
* [1.1: HTML5-Grundgerüst](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#HTML5-Grundger.C3.BCst)
Gerade Apple versucht, Seiten immer in der Ganze-Seiten-Ansicht darzustellen. Deshalb muss man die Viewport-Angabe setzen:
~~~ HTML
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
~~~
* [2.1: Vergessen Sie den Begriff Pixel!](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Vergessen_Sie_den_Begriff_Pixel)
Der Begriff `em` scheint für Anfänger eine "*unlogische"* Größe zu sein, hilft aber wirklich, da er nicht die angebliche Auflösung des Telefons in Pixel (Bei Retina-Displays gibt's da doppelt so viele, die wieder umgerechnet werden; die Schriftgröße ändert wieder alles) sondern die tatsächlichen Maße, aber eben in einer relativen Einheit, ausdrückt.
* [2.2 Festlegungen für unterschiedliche Viewports](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Festlegungen_f.C3.BCr_unterschiedliche_Viewports)
Jetzt erst kann man die media queries (**aber im em**) setzen. Alles untereinander (**Mobile first!**) und, wenn Platz ist, dann nebeneinander! Anstelle von pixelgenauem Layout lieber Flexbox oder Grid verwenden.
Apropos 768Pixel, Schau dir mal diese Grafik an und versuche passend Viewports zu setzen:
[CSS/Tutorials/Einstieg/Media Queries#Breakpoints: Inhalt über Design](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_.C3.BCber_Design)
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**
Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet...
bearbeitet von Matthias ScharwiesServus!
> Hallo,
>
>
> > ...dachte, meine Frag wäre, vielleicht einfach zu beantworten... scheint aber wohl nicht so zu sein... zumindest nicht in der Form eines einfachen Lösungsvorschlags...
Willkommen im SELF-Forum, in dem man manchmel mehr Antworten geben, als erwartet, sodass dann die Übersicht verloren geht!
>
> Warum nicht? „Arbeite mit 'em' statt 'px'“ *ist* doch ein einfacher Lösungsvorschlag!
Das Adobe-Tutorial ist gut!
SELFHTML hat im Wiki eines, das versucht die Besonderheiten des responsiven Designs herauszustellen:
* [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen)
Hier werden einfach ein paar Änderungen (die aber meist Vereinfachungen gegenüber früher sind) erklärt:
* [1.1: HTML5-Grundgerüst](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#HTML5-Grundger.C3.BCst)
Gerade Apple versucht, Seiten immer in der Ganze-Seiten-Ansicht darzustellen. Deshalb muss man die Viewport-Angabe setzen:
~~~ HTML
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
~~~
* [2.1: Vergessen Sie den Begriff Pixel!](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Vergessen_Sie_den_Begriff_Pixel)
Der Begriff `em` scheint für Anfänger eine "*unlogische"* Größe zu sein, hilft aber wirklich, da er nicht die angebliche Auflösung des Telefons in Pixel (Bei Retina-Displays gibt's da doppelt so viele, die wieder umgerechnet werden; die Schriftgröße ändert wieder alles) sondern die tatsächlichen Maße, aber eben in einer relativen Einheit, ausdrückt.
* [2.2 Festlegungen für unterschiedliche Viewports](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Festlegungen_f.C3.BCr_unterschiedliche_Viewports)
Jetzt erst kann man die media queries (**aber im em**) setzen. Alles untereinander (**Mobile first!**) und, wenn Platz ist, dann nebeneinander! Anstelle von pixelgenauem Layout lieber Flexbox oder Grid verwenden.
Apropos 768Pixel, Schau dir mal diese Grafik an und versuche passend Viewports zu setzen:
[CSS/Tutorials/Einstieg/Media Queries#Breakpoints: Inhalt über Design](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_.C3.BCber_Design)
Herzliche Grüße
Matthias Scharwies
--
25 Jahre SELFHTML → **[SELF-Treffen 05.-07. Juni 2020](https://forum.selfhtml.org/events/4)** in **Mannheim**