CSS Anpassung für Tablet – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self CSS Anpassung für Tablet Mon, 18 Sep 17 13:48:29 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704176#m1704176 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704176#m1704176 <p>Hallo</p> <p>eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung (Pickeldichte 206ppi)</p> <p>Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern und versuche das mit:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-device-width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>Da dies sich nie auswirkt habe ich mal mit Javascript eine Ausgabe gemacht. Hier kommt jetzt anstatt der erwarteten 1200 x 800 aber nur 949 x 545 heraus.</p> <p>An was liegt das? Wie muss denn die media Angabe heissen dass es nur für das Tablet greift?</p> <p>var screenWidth = window.screen.width; var screenHeight = window.screen.height; alert('Weite' + screenWidth + 'Höhe' + screenHeight</p> <p>Gruss Werner</p> CSS Anpassung für Tablet Mon, 18 Sep 17 14:04:35 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704178#m1704178 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704178#m1704178 <p>Hallo</p> <blockquote> <p>Wie muss denn die media Angabe heissen dass es nur für das Tablet greift?</p> </blockquote> <p>Mit CSS können Anweisungen nicht auf bestimmte Hardware eingeschränkt werden.</p> <p>Bewährt hat sich nur die Angabe von Fensterbreiten, alles andere hat sich als Sackgasse erwiesen.</p> <blockquote> <p>Da dies sich nie auswirkt</p> </blockquote> <p>Du musst immer auch das Element, die Klasse, die ID oder ... angeben, auf welches sich die Schriftgröße auswirken soll.</p> <p>Also zum Beispiel</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token keyword">only</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>Gruss</p> <p>MrMurphy</p> CSS Anpassung für Tablet Mon, 18 Sep 17 18:27:03 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704187#m1704187 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704187#m1704187 <p>Hallo WernerK,</p> <p>logisch und physisch nachvollziehbar, nur nicht <a href="http://webkrauts.de/artikel/2012/retina-bildschirme-und-das-pixel-als-masseinheit" rel="noopener noreferrer">gleichzeitig</a>.</p> <p>MfG, at</p> CSS Anpassung für Tablet Mon, 18 Sep 17 21:43:38 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704205#m1704205 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704205#m1704205 <p>Hej WernerK,</p> <blockquote> <p>eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung (Pickeldichte 206ppi)</p> </blockquote> <p>Und all die anderen Tablets und Smartphones? Auf denen soll es nicht laufen?</p> <p>Warum gerade auf diesem Tablet? Smartphones werden sehr viel häufiger verwendet als Tablets!</p> <blockquote> <p>Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern und versuche das mit:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-device-width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 18px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <ol> <li>möchtest du die Größe des viewports und nicht die Pixel-Anzahl des Gerätes kennen (auf iPads kann ein Browser-Fenster beliebig schmal oder breit sein, gilt sicher auch für andere Geräte)</li> <li>ist es umständlich und schädlich mit dem Layout für den Desktop anzufangen. Besser: lege die schriftgröße für kleine Bildschirme zuerst fest und mit 'min-width: irgendwas‘ dann eine andere Größe für Desktops.</li> <li>innerhalb der Media-query werden vollständige CSS-Regeln notiert — inklusive Selektoren!</li> <li>verwende keine Pixel-Angaben für Schriftgrößen, sondern em oder rem</li> <li>verwende keine Pixel-Angaben für die min-width-Angabe sondern em oder rem. Sonst kannst du nur mit erheblichen Klimmzügen sicherstellen, dass der Content immer vernünftig angezeigt wird, so dass alles im sichtbaren Bereich ist, sich nichts überlappt, Zeilen nie zu lang oder zu kurz werden usw.</li> <li>vergiss niemals: Nutzer können nicht nur zoomen, sondern auch die Schrift vergrößern </li> </ol> <blockquote> <p>Da dies sich nie auswirkt habe ich mal mit Javascript eine Ausgabe gemacht. Hier kommt jetzt anstatt der erwarteten 1200 x 800 aber nur 949 x 545 heraus.</p> </blockquote> <p>JS ist nicht für Layout zuständig.</p> <blockquote> <p>An was liegt das?</p> </blockquote> <p>Das ist eine Frage, die keine ist. CSS erledigt das besser und performanter!</p> <p>Marc</p> CSS Anpassung für Tablet Tue, 19 Sep 17 01:21:28 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704210#m1704210 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704210#m1704210 <p>@@WernerK</p> <blockquote> <p>eine Webseite soll auf einem normalen Desktop PC / Monitor laufen als auch auf einem 7" Tablet mit 1200 x 800 Auflösung</p> </blockquote> <p>Als auch auf einem Smartphone. Als auch auf einem Fernseher. Als auch auf einer Smartwatch. Als auch auf einer Spielekonsole. Als auch in einem Auto. Das ist das Web:</p> <p><img src="http://bradfrost.com/wp-content/uploads/2012/03/this-will-bethe-web-650x487.png" alt="verschiedenste Geräte inklusive Kühlschrank und Auto und viele Fragezeichen" loading="lazy"></p> <p>(<a href="http://bradfrost.com/blog/post/this-is-the-web/" rel="nofollow noopener noreferrer">Brad Frost</a>)</p> <blockquote> <p>Ich würde gerne die Schriftgröße auf dem Tablet etwas vergrößern</p> </blockquote> <p>Warum nur auf Tablets und noch kleineren Geräten? Kann es sein, dass die Schrift bei dir auch auf großen Bildschirmen zu klein ist?</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">max-device-width</span><span class="token punctuation">:</span>1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> </code></pre> </blockquote> <p>Verwende <code>max-width</code> (ohne <code>device</code>). <a href="https://zellwk.com/blog/media-query-units/" rel="nofollow noopener noreferrer">Gib Breakpoints in <code>em</code> an, nicht in <code>px</code>.</a></p> <p>LLAP </p> <div class="signature">-- <br> “When UX doesn’t consider <em>all</em> users, shouldn’t it be known as ‘<em>Some</em> User Experience’ or... SUX? #a11y” —<a href="https://twitter.com/thebillygregory/status/552466012713783297" rel="nofollow noopener noreferrer">Billy Gregory</a> </div> CSS Anpassung für Tablet Tue, 19 Sep 17 06:48:05 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704223#m1704223 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704223#m1704223 <p>Hallo alle,</p> <p>danke für die Tipps. Ich habe das mit dem Javascript nur versucht, um die tatsächliche Breite und Höhe zu ermitteln. Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?</p> <p>Mein Fehler lag tatsächlich daran das ich den Element Namen (hier body) vergessen hatte.</p> <p>Gruss Werner</p> CSS Anpassung für Tablet Tue, 19 Sep 17 06:59:01 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704226#m1704226 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704226#m1704226 <p>Hej WernerK,</p> <blockquote> <p>danke für die Tipps.</p> </blockquote> <p>Stellvertretend für die andere: Sehr gerne!</p> <p>Wenn du mal Zeit hast, lies dir zu dem einen oder anderen Punkt mal ein bisschen Hintergrund-Wissen an.</p> <p>Kommt aber auch mit der Zeit von fast selbst. Es ist ja unmöglich, sich Tutorials oder ähnliches anzuschauen ohne immer wieder auf die Vorteile von <code>em</code> usw hingewiesen zu werden. Das wird schon!</p> <blockquote> <p>Ich habe das mit dem Javascript nur versucht, um die tatsächliche Breite und Höhe zu ermitteln.</p> </blockquote> <p>Wovon? Vom Gerät? Oder vom Browserfenster?</p> <blockquote> <p>Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?</p> </blockquote> <p>Der Viewport ist der Bereich des Browsers, in dem die Webseite angezeigt wird.</p> <blockquote> <p>Mein Fehler lag tatsächlich daran das ich den Element Namen (hier body) vergessen hatte.</p> </blockquote> <p>Passiert mir heute noch manchmal: sobald ich die geschweiften Klammern geschrieben habe, schalte ich in den "Design"-Modus und denke nur noch da dran, wie etwas aussehen soll, statt dem Browser erst mal zu sagen, was überhaupt gestaltet werden muss.</p> <p>Übrigens kann man auch für das Wurzel-Element <code>html</code> Formate definieren. Es <em>kann</em> sinnvoll sein das gerade für Schriften zu nutzen. Es kommt darauf an, ob und wie du <code>rem</code> verwendest, das sich auf die Schriftgröße des Wurzel-Elementes bezieht (das 'r' in <code>rem</code> steht für <strong>r</strong>oot)</p> <p>Marc</p> CSS Anpassung für Tablet Tue, 19 Sep 17 07:03:15 Z https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704227#m1704227 https://forum.selfhtml.org/self/2017/sep/18/css-anpassung-fuer-tablet/1704227#m1704227 <p>Servus!</p> <blockquote> <p>Mit ist der Zusammenhang vom Viewport und den 1200 x 800 Breite- Höhenangabe noch nicht ganz klar. ist das dann der Viewport?</p> </blockquote> <p>Ja, wobei du den Viewport, wie schon gesagt, in der <a href="https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Zahlen,_Ma%C3%9Fe_und_Ma%C3%9Feinheiten#Relative_L.C3.A4ngenma.C3.9Fe" rel="nofollow noopener noreferrer">relativen Größe em</a> messen solltest.</p> <p>Die Media query richtest du nur an der Breite aus; der Inhalt passt sich flexibel an diese an und wird entsprechend länger oder kürzer. Deshalb solltest du keine festen Breitenangaben und gar keine Höhenangaben festlegen.</p> <blockquote></blockquote> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> Es gibt viel zu tun: <em><a href="http://wiki.selfhtml.org/wiki/Kategorie:ToDo" rel="nofollow noopener noreferrer">ToDo-Liste</a></em> </div>