@media, Bildschirmbreite und Smartphones – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self @media, Bildschirmbreite und Smartphones Sun, 09 Feb 20 17:00:13 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764779#m1764779 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764779#m1764779 <p>Hallo,</p> <p>jetzt habe ich noch eine weitere Frage: Wenn ich mich für au Internet kundig mache in Bezug auf <em>@media</em> und Bildschirmbreite, dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:</p> <ul> <li>eine Version bis 30em für die Handys machen</li> <li>eine Version bis 50em für die Tablets</li> <li>eine Version darüber für die Computer</li> </ul> <p>Allerdings scheint das alte Literatur sein, die von Uralthandys handelt. Bei neuen Modellen findet man beispielsweise 1440px = 90em als Bildschirmbreite!</p> <p>Wenn ich eine Version für Smartphones machen will (also zum Beispiel mit <nav>-Tasten, die untereinander angeordnet sind), soll ich dann statt der em-Angaben lieber cm-Angaben verwenden? Oder würdet Ihr mir zu noch ganz anderen Lösungen raten?</p> <p>Danke im voraus für Eure Hilfe. Und nehmt es mir bitte nicht übel, wenn ich einige Tage brauche, um Euch zu antworten.</p> <p>Herzliche Grüsse<br> Ingrid</p> @media, Bildschirmbreite und Smartphones Mon, 10 Feb 20 01:23:21 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764802#m1764802 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764802#m1764802 <p>Hallo Ingrid,</p> <p>(1) Displaypixel sind nicht CSS Pixel. Je nach Gerät gibt es da Verhältnisse von 2:1 oder sogar 3:1. Das machen die Geräte deshalb, damit Du kein Mikroskop zum Ablesen einer Webseite auf einem <a href="https://wiki.selfhtml.org/wiki/Retina-Display" rel="nofollow noopener noreferrer">Retina-Display</a> brauchst. Ein Gerät mit 1440 Displaypixeln Bildbreite kann also durchaus nur 720 oder 480 CSS Pixel in der Breite aufweisen.</p> <p>Aufschluß über die realen Werte gibt die Eigenschaft <a href="https://wiki.selfhtml.org/wiki/JavaScript/Window/devicePixelRatio" rel="nofollow noopener noreferrer">window.devicePixelRatio</a>.</p> <p>(2) 16px ≠ 1em. Es ist oft so, ja, aber es ist nicht zwingend gleich. Verstellt der Anwender seine Textskalierung, oder definierst Du eine andere Fontgröße für den Body, ist das Verhältnis nicht mehr gegeben.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> @media, Bildschirmbreite und Smartphones Mon, 10 Feb 20 09:03:52 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764807#m1764807 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764807#m1764807 <p>dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:</p> <blockquote> <ul> <li>eine Version bis 30em für die Handys machen</li> <li>eine Version bis 50em für die Tablets</li> <li>eine Version darüber für die Computer</li> </ul> </blockquote> <p>Ich nehme einfach die Webseite oder eine HTML-Version des Templates mit Beispieltext („lorem ypsum“) und verkleinere die Anzeigefläche mit den üblichen Browsertools - oder halt das Browser-Fenster und schaue dabei zu dass die Seite <strong>in jeder Größe</strong> gefällig aussieht und bedienbar bleibt. Setze also die „Stop-Punkte“ bei den in den Tools angezeigten Größen, wann immer das notwendig oder geboten erscheint - oder auch nur „besser gefällt“.</p> <p><strong>Anders ausgedrückt: Ich verwende keine festen Maße.</strong></p> @media, Bildschirmbreite und Smartphones Tue, 11 Feb 20 06:13:25 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764877#m1764877 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1764877#m1764877 <p>@@Ingrid</p> <blockquote> <p>Wenn ich mich für au Internet kundig mache in Bezug auf <em>@media</em> und Bildschirmbreite, dann finde ich zum Teil in etwa folgende Ratschläge für das Erstellen einer Internetseite:</p> <ul> <li>eine Version bis 30em für die Handys machen</li> <li>eine Version bis 50em für die Tablets</li> <li>eine Version darüber für die Computer</li> </ul> <p>Allerdings scheint das alte Literatur sein, die von Uralthandys handelt.</p> </blockquote> <p>Mag sein oder auch nicht. Solch Unsinn findet man leider auch heute noch immer wieder.</p> <p>Wie ich <a href="https://forum.selfhtml.org/self/2019/dec/30/chrome-responsive-siehst-versieden-als-firefox/1762366#m1762366" rel="noopener noreferrer">unlängst</a> erst sagte, hat das nichts mit <strong lang="en">responsive design</strong> – also Webdesign<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup> – zu tun; <a href="https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761074#m1761074" rel="noopener noreferrer">es schließt sich aus.</a></p> <blockquote> <p>Oder würdet Ihr mir zu noch ganz anderen Lösungen raten?</p> </blockquote> <p>Ja, zu responsive design: Breakpoints (media queries) dort, wo es <em>der Inhalt</em> erfordert.</p> <p>Oder gar keine. Moderne Layouttechniken (Grid mit <code>auto-fill</code>/<code>auto-fit</code>, Flexbox) machen media queries oft überflüssig (<strong lang="en">intrinsic design</strong><sup class="footnote-ref"><a href="#fn2" id="fnref2">[2]</a></sup>).</p> <p>Unter dem Stichwort sollte einiges im Zwischennetz zu finden sein, insbesondere von Jen Simmons (YouTube-Kanal Layout Land).</p> <p>LLAP </p> <div class="signature">-- <br> Wenn der Faschismus wiederkommt, wird er nicht sagen: Hallo, ich bin der Faschismus! Sondern er wird sagen: Ich nehme die Wahl an. </div> <hr class="footnotes-sep"> <section class="footnotes"> <ol class="footnotes-list"> <li id="fn1" class="footnote-item"><p><a href="https://twitter.com/g16n/status/530307801210683392" rel="nofollow noopener noreferrer">John Allsopp</a> <a href="#fnref1" class="footnote-backref">↩︎</a></p> </li> <li id="fn2" class="footnote-item"><p><a href="https://twitter.com/jensimmons/status/980980521848127488" rel="nofollow noopener noreferrer">Jen Simmons</a> <a href="#fnref2" class="footnote-backref">↩︎</a></p> </li> </ol> </section> @media, Bildschirmbreite und Smartphones Sun, 16 Feb 20 11:37:32 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765284#m1765284 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765284#m1765284 <p>Hallo!</p> <p>Erst einmal herzlichen Dank für Eure Antworten. Ich bitte Euch um Entschuldigung, dass ich mich erst jetzt zurückmelde. Aber ich hatte einige unvorhergesehene berufliche und familiäre Verpflichtungen. Und ich wollte auch nicht in wenigen Minuten auf Unverdautes antworten, und noch dazu durch die Übereilung unklar formuliert. Denn dann hättet Ihr Zeit mit manchen Eurer Antworten verloren.</p> <p>Von dem Unterschied der Bildschirmpixel und der CSS-Pixel hatte ich noch nie etwas gehört. Wie ich diese Information praktisch verwenden soll, weiß ich noch nicht.</p> <p>Und dann ist da noch das Problem, dass ich es nicht schaffe, das Smartphone mit media-queries anzusprechen. Auf XAMPP funktionniert es: Wenn ich den Bildschirm probehalber zusammenschiebe, verändern sich die Eigenschaften entsprechend den @media-Vorgaben.<br> Aber auf dem echten Smartphone ändert sich der Bildschirm nur, wenn ich die Eigenschaften bei Computer-großer em-Breite verändere. Aber ich will andere Eigenschaften für die Smartphone-Version als für die Computer-Version.<br> Und die automatischen Voreinstellungen des Smartphones passen mir überhaupt nicht: Da werden beispielsweise die <p> in normaler Größe anzeigt, während die <li> und die <td> seltsamerweise auf Lupengröße verkleinert werden.</p> <p>Ganz konkret geht es mir um folgende Fragen:</p> <ul> <li> <p>Wie soll ich es konkret schaffen, beispielsweise einzelne Fotos für die Smartphone-Version zu unterdrücken, um das Datenvolumen zu erleichtern, wenn ich nicht weiß, wie ich die Smartphone-Version tatsächlich ansprechen kann? (Ich übertreibe es nicht mit dem Datenvolumen, aber manche Fotos sind auf der großen Computerbildschirmfläche durchaus willkommen, während sie nicht unbedingt nötig für die Smartphone-Version sind.)</p> </li> <li> <p>Wie kann ich es konkret vermeiden, dass die Navigationsleiste in der Smartphone-Version waagrecht angezeigt wird (mit winzigen Buchstaben, für die ein guter Teil der Benutzer zoomen muss), während große Teile der restlichen Texte von vorherein in normaler Schriftgröße angezeigt werden? Was soll ich machen, damit die Navigationsleiste senkrecht angezeigt wird und die gesamte Smartphone-Bildschirmbreite einnimmt? (Um kein Missverständnis aufkommen zu lassen: Ich weiß, wie man die Navigationsleiste waagrecht oder senkrecht programmieren kann. Aber mir fehlt das Wissen darüber, wie ich es machen kann, damit eine andere Version auf dem Computer als auf dem Smartphone erscheint.)<br> Irgendwie schaffe ich es nicht, die Buchstabengröße u. ä. bei der Smartphoneversion zu beeinflussen. Dies ist unter anderem deshalb ärgerlich, weil das Smartphone die <p> in normaler Größe anzeigt, während es die <li> und die <td> seltsamerweise auf Lupengröße verkleinert.</p> </li> </ul> <p>Ich wünsche Euch noch einen schönen Tag.</p> <p>Herzliche Grüße<br> Ingrid</p> @media, Bildschirmbreite und Smartphones Sun, 16 Feb 20 11:45:40 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765285#m1765285 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765285#m1765285 <p>Hallo Ingrid,</p> <ul> <li>ist dein HTML <a href="https://validator.nu/" rel="noopener noreferrer">valide</a>?</li> <li>stimmt das <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst" rel="nofollow noopener noreferrer">HTML-Grundgerüst</a>?</li> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries" rel="nofollow noopener noreferrer">Media Queries</a></li> </ul> <p>Bis demnächst<br> Matthias</p> <div class="signature">-- <br> Du kannst das Projekt SELFHTML unterstützen,<br> indem du bei Amazon-Einkäufen <a href="https://smile.amazon.de/ch/314-570-45498" rel="nofollow noopener noreferrer">Amazon smile</a> (<a href="https://www.amazon.de/gp/help/customer/display.html?ie=UTF8&nodeId=202035970%5D" rel="nofollow noopener noreferrer">Was ist das?</a>) nutzt. </div> @media, Bildschirmbreite und Smartphones Sun, 16 Feb 20 15:45:41 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765301#m1765301 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765301#m1765301 <p>Hallo Matthias,</p> <p>insbesondere die viewport Angabe, die habe ich für die Smartphone Probleme im Verdacht.</p> <p><em>Rolf</em></p> <div class="signature">-- <br> sumpsi - posui - clusi </div> @media, Bildschirmbreite und Smartphones Sun, 16 Feb 20 15:49:02 Z https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765302#m1765302 https://forum.selfhtml.org/self/2020/feb/09/media-bildschirmbreite-und-smartphones/1765302#m1765302 <p>Hallo</p> <blockquote> <ul> <li>stimmt das <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst" rel="nofollow noopener noreferrer">HTML-Grundgerüst</a>?</li> </ul> </blockquote> <p><a href="/users/8003" class="mention registered-user" rel="noopener noreferrer">@Ingrid</a> Dein Problem, dass zum Beispiel Listen <em>sehr klein</em>, mit deinen Worten „in Lupengröße“, dargestellt werden, riecht mir nach im Seitenheader nicht oder falsch gesetzter <a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5/Grundger%C3%BCst#Viewportangabe" rel="nofollow noopener noreferrer">Viewportangabe</a>. Wenn du also gemäß Matthias' Fragenkatalog deinen Code prüfst, achte bitte auch darauf, die Angabe so zu setzen, wie es im Wiki empfohlen wird.</p> <p>Tschö, Auge</p> <div class="signature">-- <br> Ein echtes Alchimistenlabor musste voll mit Glasgefäßen sein, die so aussahen, als wären sie beim öffentlichen Schluckaufwettbewerb der Glasbläsergilde entstanden.<br> <em>Hohle Köpfe</em> von Terry Pratchett </div>