nicht angemeldet
Größe des sichtbaren Bildschirmbereichs ermitteln
Matthias Scharwies
marctrix
Gunnar BittersmannMoin, wie nennt man eigentlich den sichtbaren Bereich auf PC, Tablet, Smartphone? Ist das auf neudeutsch der Screen? Meine eigentliche Frage. Wenn ich, um responsive Anwendungen zu schreiben, diese Bereich nach und nach verkleinere, komme ich zu einer Stelle, wo ich das Layout verändern möchte. In Beispielen habe ich Angaben gelesen wie "@media only screen and (max-width: 500px)". Wie kommt man zu diesen Werten? Wie kann ic, wenn ich meinen "Screen" jetzt bis zu einer Stelle verkleinert habe, messen wieviele Pixel die Breite beträgt?
-
hallo
Moin, wie nennt man eigentlich den sichtbaren Bereich auf PC, Tablet, Smartphone? Ist das auf neudeutsch der Screen?
Für den Bereich, den man in der Grösse verändern kann gebraucht man den Begriff des viewports (oder zu deutsch ca: Sichtfeld)
Wenn ich, um responsive Anwendungen zu schreiben, diese Bereich nach und nach verkleinere, komme ich zu einer Stelle, wo ich das Layout verändern möchte. In Beispielen habe ich Angaben gelesen wie "@media only screen and (max-width: 500px)". Wie kommt man zu diesen Werten?
Ich bin nicht mal sicher, ob das eine zuverlässige Angabe ist. Ich würde das bevorzugen: @media only screen and (max-width: 40em){}
em bezieht sich dabei auf die im Browser eingestellte default Schriftgrösse.
Wie kann ic, wenn ich meinen "Screen" jetzt bis zu einer Stelle verkleinert habe, messen wieviele Pixel die Breite beträgt?
Da beginnt die Konfusion: Beziehen sich die Pixel auf CSS-Pixel (hoffentlich ja) oder auf Screen Pixel?
Du kannst alle erlaubten Einheiten verwenden, also auch mm oder cm.
--
Neu im Forum! Signaturen kann man ausblenden!-
Servus!
wie nennt man eigentlich den sichtbaren Bereich auf PC, Tablet, Smartphone? Ist das auf neudeutsch der Screen?
Für den Bereich, den man in der Grösse verändern kann gebraucht man den Begriff des viewports (oder zu deutsch ca: Sichtfeld)
Wiki: Viewport
Wenn ich, um responsive Anwendungen zu schreiben, diese Bereich nach und nach verkleinere, komme ich zu einer Stelle, wo ich das Layout verändern möchte. In Beispielen habe ich Angaben gelesen wie "@media only screen and (max-width: 500px)". Wie kommt man zu diesen Werten?
Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.
Lies folgende Tutorials:
- HTML/Tutorials/responsive Webdesign
- [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende Webseiten responsiv umbauen)
- Tipps und Tricks für media queries
Ich bin nicht mal sicher, ob das eine zuverlässige Angabe ist. Ich würde das bevorzugen: @media only screen and (max-width: 40em){}
em bezieht sich dabei auf die im Browser eingestellte default Schriftgrösse.
Ja, hier noch einmal mehr über em im oben verlinkten Tutorial: Vergessen Sie den Begriff Pixel!
Du kannst alle erlaubten Einheiten verwenden, also auch mm oder cm.
Ja, aber das wäre im Webdesign absolut sinnlos und verwirrt hier doch nur!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste-
Moin,
Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.
Zum Umdrehen ist es leider zu spät. Ich soll bestehende Seiten anpassen.
-
Servus!
Moin,
Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.
Zum Umdrehen ist es leider zu spät. Ich soll bestehende Seiten anpassen.
Lies dir mal dies durch:
- [HTML/Tutorials/bestehende Webseiten responsiv umbauen](https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende Webseiten responsiv umbauen)
Oft ist es doch einfacher, die Breitenangaben aus bestehenden Seiten herauszulöschen, als dies erst innerhalb der media queries zu tun.
Viel Erfolg!
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
Hej Chrissy,
Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.
Zum Umdrehen ist es leider zu spät. Ich soll bestehende Seiten anpassen.
Das ist nicht lustig. Fühlt sich so an, wie aus einem Muffin im Nachhinein einen Blaubeer-Muffin zu machen. Viel Spaß beim einfügen der Blaubeeren. 😉
Um es anders zu sagen: zeitaufwändig und das Ergebnis ist schlecht. Desktop first bedeutet unter anderem, dass die meisten Besucher (die nun man mit einem smartphone kommen) von ihren kleinen Geräten mit begrenter Energie erst die Desktop-Variante erstellen und dann daraus die mobil-Variante errechnen müssen. Dabei wäre es doch so einfach: für Handys einfach keine Spalten machen und gut ist. Da soll doch fast alles einfach nur untereinander ausgegeben werden.
So werden die Handys heiß laufen (schön im Sommer, wenn dann vielleicht auch noch der RPozessor als Überhitzungsschutz gedrosselt wird), die akkus bald leer sein und die Desktops langweilen sich (schon weil sie eh kaum noch benutzt werden)…
Vielleicht kannst du ja noch was retten und den Betreiber der Seiten dazu überreden seinen uralten Kram mal neu zu machen?!?
Wenn es noch nicht responsiv ist, ist das doch bestimmt schon 7-20 Jahre so im Netz?!?
Ab und zu muss man so was mal neu machen…
Marc
-
Das Problem, dass langjährige Seiten "modernisiert" werden sollen, kommt vermutlich häufiger vor. Beispiel: Seiten von Vereinen, wo chronologisch Aktivitäen, Fotos von Veranstaltungen,... veröffentlicht werden.
-
Servus!
Das Problem, dass langjährige Seiten "modernisiert" werden sollen, kommt vermutlich häufiger vor. Beispiel: Seiten von Vereinen, wo chronologisch Aktivitäen, Fotos von Veranstaltungen,... veröffentlicht werden.
Ja, das Markup kann ja, wenn es nicht 20-Jahre altes Tabellenlayout ist, bleiben.
Aber das CSS sollte man evtl. komplett neu erstellen, damit es
-
in Komponenten gegliedert ist
-
übersichtlicher und kürzer wird.
Herzliche Grüße
Matthias Scharwies
--
Es gibt viel zu tun: ToDo-Liste -
-
Hej Chrissy,
Das Problem, dass langjährige Seiten "modernisiert" werden sollen, kommt vermutlich häufiger vor.
Habe ich auch schon gemacht. Aber es ist besser, relativ grundlegend an die Sache zu gehen.
Wenigstens die Größenangaben rauszuwerfende, wie hier bereits gesagt wurde.
Beispiel: Seiten von Vereinen, wo chronologisch Aktivitäen, Fotos von Veranstaltungen,... veröffentlicht werden.
Alle möglichen Institutionen und Organisationen haben Webseiten. Aber du hast sicher schon bemerkt, dass fast jeder nach einer Weile die eigene Webseite mal erneuert. Manchmal ist es mit ein bisschen Spachtelmasse nicht getan, dann muss richtig renoviert werden…
Marc
-
-
-
-
@@Matthias Scharwies
@media only screen and (max-width: 500px) Achtung, dies wird in vielen Tutorials falsch gelehrt! Dreh die Vorgehensweise um.
Die Aussage ist wie alle pauschalen Aussagen falsch.
Wierum man media queries verwendet …
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
Wie kann ic, wenn ich meinen "Screen" jetzt bis zu einer Stelle verkleinert habe, messen wieviele Pixel die Breite beträgt?
Da muss schon Javascript ran und die Breite des html Elements ermitteln.
document.documentElement.clientWidth (oder .clientHeight)
Ich könnte dann das Resultat (theoretisch) in einer CSS Variable speichern.
Auf der Basis dieser Variable könnte ich dann beliebiges mittels calc() beinflussen, theoretische mindestens.
--
Neu im Forum! Signaturen kann man ausblenden!-
@@beatovich
Ich könnte dann das Resultat (theoretisch) in einer CSS Variable speichern.
Custom properties sind mehr als bloß CSS-Variablen
LLAP 🖖
--
„Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
-
-