Angepasstes design für mobile Endgeräte

[Coco2]

Hallo ihr lieben,

Ich baue gerade meine erste Webseite für unseren Theaterverein. Die Webseite ist für den PC soweit fertig. Jetzt wollte ich auch Designs für Handy und tablet im hoch und Querformat machen. Da bin ich auf Probleme gestoßen.

In meinem Buch dass ich gelesen hab, sollte das mit px gemacht werden. Aber neue Handys haben ja extrem hohe Auflösungen. Also mein Handy (ziemlich neu) hat eine höhere Auflösung als mein tablet. Also mit px kann man doch sowas nicht lösen, oder?

ich dachte, naja dann mach ich es eben mit cm. Aber irgendwie haben die offensichtlich nicht verstanden was ein cm ist. Weil da kommt was völlig anderes raus.

Wie löst ihr das denn?

Gruß coco

[Christian Marquardt]

Du möchtest

Responsive Web Design

https://www.w3schools.com/html/html_responsive.asp

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones):

Einheiten
https://www.w3.org/Style/Examples/007/units.de.html

[Ralf Jansen]

Nur zur Ergänzung, steht vermutlich auch irgendwo in dem Einheiten Link von Christian, px meint auch Pixel aber nicht die die du direkt auf die Pixel Zahl deines Display mappen kannst. 1px ist definiert als 1/96inch und damit unabhängig von der tatsächlichen Pixelzahl des Displays. px ist üblicherweise die beste Wahl die man treffen kann. Idealerweise zumindest ein Einheitensystem durchziehen und nicht mischen. Solltest du irgendwelche Framework benutzen das beim Responsive Design helfen, wie zum Beispiel Bootstrap, dann solltest du eh bei px bleiben weil diese Frameworks es auch tun.

[Coco2]

Danke Leute, ich glaube ich hab es. Ich hab wie im link von Christian mit dem meta diesen viewport in der html angegeben. Jetzt scheint das besser zu klappen. Das hab ich vorher nicht gemacht. Danke
Gruß coco

[Markus Lahr]

Zusatz: auf mobilen Endgeräte inkl. mobiler Webseite kann es passieren das Inhalte auf der linken Seite nicht angezeigt werden. Dort sollte man also keine Informationen mit hoher Änderungsrate platzieren.