tag:forum.selfhtml.org,2005:/self Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... – SELFHTML-Forum 2019-12-05T04:02:48Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761069#m1761069 salzberg 2019-12-02T15:29:04Z 2019-12-02T15:29:04Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo zusammen,</p> <p>im Browser, auch im 'Responsive-ansichts-Modus funktioniert alles wunderbar... ... doch am echten iPhone (hochkant, 640 Bildpunkte...) kommt nur die Tablet-Ansicht.</p> <p>Wie kann das sein?</p> <p>Hier der maßgebliche (einfache) Code mit den paaar Unterschieden...nach dem allgemeinen css:</p> <pre><code class="block">@media (min-width: 768px){ .style-nav ul li { display: inline-block; } .style-nav ul { text-align: center; } } </code></pre> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761072#m1761072 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-02T16:07:50Z 2019-12-02T16:07:50Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo salzberg,</p> <blockquote> <pre><code class="block bad language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Setze deine Mediaqueries nicht in Pixel sondern in em entsprechend dem Inhalt. Siehe etwa <a href="https://forum.selfhtml.org/m1760778" rel="noopener noreferrer">diesen Beitrag</a>.</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761074#m1761074 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-02T17:32:51Z 2019-12-02T17:32:51Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@salzberg</p> <blockquote> <p>… kommt nur die Tablet-Ansicht.</p> </blockquote> <p>„Responsive Design“ und „Tablet-Ansicht“ schließen sich gegenseitig aus. Beim Responsive Design gibt es keine Geräteklassen „Mobile“, „Tablet“, „Desktop“. Oder andersrum gesagt: Wer mit Begriffen „Mobile“, „Tablet“, „Desktop“ rumhantiert, der macht kein Responsive Design.</p> <blockquote> <p><code>@media (min-width: 768px)</code></p> </blockquote> <p>Wer mit der Zahl 768 rumhantiert, der macht kein Responsive Design.</p> <blockquote> <p>Wie kann das sein?</p> </blockquote> <p>Ich vermute, das iPhone denkt, die Seite soll 960 Pixel breit sein, weil du <a href="https://forum.selfhtml.org/self/2015/jan/29/mobiler-browser-und-einfaches-html/1631163#m1631163" rel="noopener noreferrer">nichts anderes angegeben</a> hast.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761077#m1761077 salzberg 2019-12-02T23:31:49Z 2019-12-02T23:31:49Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Danke für die Antworten... aber als Greenhorn komm' ich damit aber momentan nicht so richtig weiter. ...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...</p> <p>Ich arbeite mit einem Tutorial – gut das ist 3 Jahre... denke aber nicht, dass sich innerhalb dieser Zeit so gut wie alles geändert hat... und alles was dort gezeigt wird, über den Haufen geschmissen werden muss - auch wenn ihr Profis, solche Seiten wahrscheinlich ganz anders aufbauen und so manches anders benennen würdet.</p> <p>Mein Responsive Design (nach dem Muster aus dem Tutorial) funktioniert in der Responsive-Simulation des Browsers. Die Seite ist grundsätzlich für Smartphone-Bildschirme aufgebaut, sobald der Breiter größer als 768 px ist, gibt es ein paar Änderungen... und nochmals welche ab 1024. Für mich erscheint es am einfachsten, die Bildschirmgröße, die ja mit Bildpunkten angegeben wird, abzufragen... und dementsprechend den jeweiligen css-Anweisungen zu aktivieren... alles andere begreife ich derzeit (noch) nicht.</p> <p>Warum das mit dem iPhone so nicht funktioniert... das ist immer noch meine Frage.</p> <p>Ach so, hier noch der <a href="https://helpx.adobe.com/de/dreamweaver/how-to/create-responsive-navigation-menu.html?playlist=/content/help/de/de/ccx/v1/collection/product/dreamweaver/segment/designer/explevel/advanced/applaunch/orientation/collection.ccx.js" rel="nofollow noopener noreferrer">Link zum erwähnten Tutorial</a>. (3 Lektionen)</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761078#m1761078 Tabellenkalk 2019-12-03T02:48:55Z 2019-12-03T02:48:55Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo,</p> <blockquote> <p>...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...</p> </blockquote> <p>Warum nicht? „Arbeite mit 'em' statt 'px'“ <em>ist</em> doch ein einfacher Lösungsvorschlag!</p> <p>Gruß<br> Kalk</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761080#m1761080 JürgenB https://www.j-berkemeier.de 2019-12-03T07:51:53Z 2019-12-03T07:52:13Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo,</p> <p>zum Thema „Pixel“:</p> <p>Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761079#m1761079 Matthias Scharwies mscharwies@selfhtml.org 2019-12-03T04:56:02Z 2019-12-03T04:57:18Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Servus!</p> <blockquote> <p>Hallo,</p> <blockquote> <p>...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...</p> </blockquote> </blockquote> <p>Willkommen im SELF-Forum, in dem manchmal mehr Antworten kommen als erwartet, sodass dann die Übersicht verloren geht!</p> <blockquote> <p>Warum nicht? „Arbeite mit 'em' statt 'px'“ <em>ist</em> doch ein einfacher Lösungsvorschlag!</p> </blockquote> <p>Das Adobe-Tutorial ist gut!</p> <p>SELFHTML hat im Wiki eines, das versucht die Besonderheiten des responsiven Designs herauszustellen:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen" rel="nofollow noopener noreferrer">HTML/Tutorials/bestehende Webseiten responsiv umbauen</a></li> </ul> <p>Hier werden einfach ein paar Änderungen (die aber meist Vereinfachungen gegenüber früher sind) erklärt:</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#HTML5-Grundger.C3.BCst" rel="nofollow noopener noreferrer">1.1: HTML5-Grundgerüst</a></li> </ul> <p>Gerade Apple versucht, Seiten immer in der Ganze-Seiten-Ansicht darzustellen. Deshalb muss man die Viewport-Angabe setzen:</p> <pre><code class="block language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">doctype</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>head</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>utf-8<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>viewport<span class="token punctuation">"</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>width=device-width, initial-scale=1.0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ... </code></pre> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Vergessen_Sie_den_Begriff_Pixel" rel="nofollow noopener noreferrer">2.1: Vergessen Sie den Begriff Pixel!</a></li> </ul> <p>Der Begriff <code>em</code> scheint für Anfänger eine "<em>unlogische"</em> 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.</p> <ul> <li><a href="https://wiki.selfhtml.org/wiki/HTML/Tutorials/bestehende_Webseiten_responsiv_umbauen#Festlegungen_f.C3.BCr_unterschiedliche_Viewports" rel="nofollow noopener noreferrer">2.2 Festlegungen für unterschiedliche Viewports</a></li> </ul> <p>Jetzt erst kann man die media queries (<strong>aber in em</strong>) setzen. Alles untereinander (<strong>Mobile first!</strong>) und, wenn Platz ist, dann nebeneinander! Anstelle von pixelgenauem Layout lieber Flexbox oder Grid verwenden.</p> <p>Apropos 768Pixel, Schau dir mal diese Grafik an und versuche passend Viewports zu setzen:</p> <p><a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_.C3.BCber_Design" rel="nofollow noopener noreferrer">CSS/Tutorials/Einstieg/Media Queries#Breakpoints: Inhalt über Design</a></p> <p>Herzliche Grüße</p> <p>Matthias Scharwies</p> <div class="signature">-- <br> 25 Jahre SELFHTML → <strong><a href="https://forum.selfhtml.org/events/4" rel="noopener noreferrer">SELF-Treffen 05.-07. Juni 2020</a></strong> in <strong>Mannheim</strong> </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761087#m1761087 klawischnigg 2019-12-03T11:16:15Z 2019-12-03T11:16:15Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hi there,</p> <blockquote> <blockquote> <p>...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...</p> </blockquote> <p>Warum nicht? „Arbeite mit 'em' statt 'px'“ <em>ist</em> doch ein einfacher Lösungsvorschlag!</p> </blockquote> <p>Vielleicht, aber nicht für das Problem des Originalposters. Genausogut hätte man erwähnen können, daß er zum designen keine Tabellen verwenden darf - auf seinem Iphon wäre die Darstellung immer noch "falsch"...</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761122#m1761122 salzberg 2019-12-04T00:47:04Z 2019-12-04T00:47:04Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)</p> <p>..oder ist das so einfach nicht?</p> <p>Blicke das noch nicht.... sorry...</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761089#m1761089 salzberg 2019-12-03T11:20:32Z 2019-12-03T11:20:32Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Herzlichen Dank schon mal für den sehr ausführlichen Text.</p> <p>Ich werde das alles mal nacheinander abarbeiten... kann aber eine Weile dauern, da ich meist nur abends an dem Projekt arbeiten kann... ...melde mich, wenn es Neues gibt.</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761123#m1761123 salzberg 2019-12-04T01:49:25Z 2019-12-04T01:51:20Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo nochmals,</p> <p>hab' versucht, das ganze zu begreifen... komme aber nicht so recht weiter... Offenbar muss heute doch schon wieder vieles anders laufen, als in den Adobe-Videos gezeigt... schade... war noch so schön einfach (für mich) zu verstehen... genauso wie <a href="https://blog.kulturbanause.de/2011/04/websites-mit-css3-media-queries-fur-iphone-ipad-android-co-optimieren/" rel="nofollow noopener noreferrer">das Video auf dieser Seite hier</a>... aber wenn z.B. px-Angaben wirklich out sind, bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...</p> <p>…wünschte, es gäbe solche Videos mit em, viewport, flexbox, aside, etc.</p> <p>Es ist ja super, dass Menschen sich die Mühe machen, so viele Informationen, wie hier im wiki zusammenzustellen... Doch offenbar benötigt es doch gewisse Grundlagen, um die Dinge zu verstehen, es kommen dann immer schnell weitere Begriffe ins Spiel, die ich alle nicht verstehe.</p> <p>Ich verstehe auch <a href="https://wiki.selfhtml.org/wiki/Datei:Viewports.png" rel="nofollow noopener noreferrer">diese Grafik</a> in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_.C3.BCber_Design" rel="nofollow noopener noreferrer">diesem Eintrag</a> nicht. Was soll denn damit ausgesagt werden? ... und mit welchen Einheiten werden denn z.b. Viewport- (also Anzeige-) Breiten gemessen?</p> <p>Was sind realistische Werte? Wieviel Breakpoints sollte man setzen? Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?</p> <p>Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)</p> <p>Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte. Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?</p> <p>Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.</p> <p>Vielen Dank schon mal und einen schönen Tag euch allen.</p> <pre><code class="block language-css">Quelltext hier<span class="token atrule"><span class="token rule">@charset</span> <span class="token string">"UTF-8"</span><span class="token punctuation">;</span></span> <span class="token comment">/* CSS Document */</span> <span class="token selector">html, html *</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Verdana<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> small<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">A:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #333333<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">header</span> <span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 1px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">img</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">max-width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token property">height</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">vertical-align</span><span class="token punctuation">:</span> middle<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token property">padding-right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">footer</span> <span class="token punctuation">{</span> <span class="token property">padding-top</span><span class="token punctuation">:</span> 2px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.style-logo</span> <span class="token punctuation">{</span> <span class="token property">margin-left</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">margin-right</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> larger<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #999999<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 1000 <span class="token punctuation">}</span> <span class="token selector">.style-nav ul</span> <span class="token punctuation">{</span> <span class="token property">list-style-type</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">padding-left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.style-nav ul li a</span> <span class="token punctuation">{</span> <span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #999999<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 500<span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.footer-text</span> <span class="token punctuation">{</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span> <span class="token property">color</span><span class="token punctuation">:</span> #666666<span class="token punctuation">;</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.row:before, .row:after</span> <span class="token punctuation">{</span> <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">""</span><span class="token punctuation">;</span> <span class="token property">display</span><span class="token punctuation">:</span> table<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.rowa:after</span> <span class="token punctuation">{</span> <span class="token property">clear</span><span class="token punctuation">:</span>both<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">/*Tablett-Ansicht*/</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token selector">.style-nav ul li</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.style-nav ul</span> <span class="token punctuation">{</span> <span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">/*Computer-Ansicht*/</span> <span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span></span><span class="token punctuation">{</span> <span class="token selector">.style-logo</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.style-nav</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> right<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761081#m1761081 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-03T08:00:54Z 2019-12-03T08:02:52Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@JürgenB</p> <blockquote> <p>zum Thema „Pixel“:</p> <p>Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?</p> </blockquote> <p>Nein, das will man nicht.</p> <p>Aber: das wird auch nicht passieren.</p> <p>Zu Thema „Pixel“ sei noch einmal gesagt, dass <strong>CSS-Pixel</strong> nichts mit <strong>Gerätepixeln</strong> zu tun haben.</p> <p>Dass beides immer wieder durcheinandergebracht wird, ist ein weiterer Grund, im Stylesheet nirgendwo <code>px</code> zu verwenden.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761082#m1761082 JürgenB https://www.j-berkemeier.de 2019-12-03T08:12:39Z 2019-12-03T08:12:39Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo Gunnar,</p> <p>das sollte ein „drastisches“ Beispiel sein, um Werbung für <code>em</code> in Mediaqueries zu machen.</p> <blockquote> <blockquote> <p>zum Thema „Pixel“:</p> <p>Willst du, nur weil es irgendein Hersteller geschafft hat, auf einem Display mit 10cm Diagonale 4000*2000 Pixel unterzubringen, das deine Seite auf diesem Display das gleiche Layout hat, wie auf einem Monitor mit 2 Meter Bilddiagonale?</p> </blockquote> <p>Nein, das will man nicht.</p> <p>Aber: das wird auch nicht passieren.</p> <p>Zu Thema „Pixel“ sei noch einmal gesagt, dass <strong>CSS-Pixel</strong> nichts mit <strong>Gerätepixeln</strong> zu tun haben.</p> </blockquote> <p>ich bin in einem Alter, in dem die Sehstärke nachlässt. Als ich bei der Arbeit meinen ersten Full-HD-Monitor bekommen habe, hatte ich Mühe, die Schriftgrößen etc. auf Maximum zu stellen, weil ich die Angaben im Setup-Programm kaum lesen konnte. Ich habe mit der Nase fast den Bildschirm berührt.</p> <p>Bei Smartphones passt das mit den CSS-Pixeln, bei PC-Bildschirmen bin ich mir da nicht so sicher. Daher <code>em</code> statt <code>px</code>.</p> <p>Gruß<br> Jürgen</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761092#m1761092 Der Martin 2019-12-03T11:51:09Z 2019-12-03T11:51:09Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo Jürgen,</p> <blockquote> <p>ich bin in einem Alter, in dem die Sehstärke nachlässt.</p> </blockquote> <p>ich bin in einem Alter, in dem die Sehstärke (oder Sehschwäche) eigentlich seit vielen Jahren stabil ist (rechts -6.25dpt, links -8dpt). Aber die Flexibilität der Linse lässt so langsam nach, so dass mir mit Brille das Sehen im Nahbereich allmählich schwerfällt. Kürzere Abstände als ca. 50cm kriege ich mit Brille nur noch bei idealen Lichtverhältnissen sauber focussiert. Wenn ich dann mal richtig "ins Detail" gehen muss, nehme ich die Brille ab, dann kann ich bis auf etwa 10cm ans Objekt rangehen, sozusagen im Macrobereich. Auch zum Lesen nehme ich in letzter Zeit oft die Brille ab.</p> <p>Als ich vor ein paar Jahren beim Augenarzt gefragt habe, ob eine Gleitsichtbrille nicht eine gute Idee wäre, hat der mir davon abgeraten. Wenn ich mit meiner derzeitigen Methode (zum Sehen in der Nähe Brille abnehmen) im Alltag gut zurechtkäme, sollte ich meinen Augen zuliebe dabei bleiben. Sonst würde man der "Faulheit" der Augen noch Vorschub leisten.</p> <blockquote> <p>Als ich bei der Arbeit meinen ersten Full-HD-Monitor bekommen habe, hatte ich Mühe, die Schriftgrößen etc. auf Maximum zu stellen, weil ich die Angaben im Setup-Programm kaum lesen konnte. Ich habe mit der Nase fast den Bildschirm berührt.</p> </blockquote> <p>Ich kenn das Problem. Ich habe hier beim Arbeitgeber zwei 24"-Monitore in Full HD. Da habe ich die Basis-Schriftgröße von Windows auf 125% gestellt. Auf dem kleinen 15"-Display am Notebook (ebenfalls Full HD) sogar auf 150%.<br> Nachteil: Bei Anwendungen, die auf Windows Forms basieren, ist die Schrift unscharf - vermutlich wird da nicht die Schriftgröße skaliert, sondern die fertig gerenderte und gepixelte Schrift.</p> <p>Ciao,<br>  Martin</p> <div class="signature">-- <br> Frage an die Kollegin am Montagmorgen: "Na, wie war dein Wochenende?"<br> Depressive Kollegin: "Hell, dunkel, hell, dunkel, Montag." </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761124#m1761124 klawischnigg 2019-12-04T02:00:01Z 2019-12-04T02:00:01Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hi there,</p> <blockquote> <p>Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)</p> </blockquote> <p>natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761125#m1761125 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T04:13:55Z 2019-12-04T04:13:55Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo salzberg,</p> <blockquote> <p>bringt das wohl nicht nur mit sich. dass das einzige, was man machen muss, ist, px durch entsprechende em-Werte austauschen...</p> </blockquote> <p>Setze keine gerätespezifischen Breakpoints sondern setze sie abhängig vom Inhalt, zum Beispiel dann, wenn deine Überschrift nicht mehr einzeilig auf die Seite passt. Bzw. mobile first - wenn der Bildschirm genügend Platz für eine andere Gesatltung bietet.</p> <blockquote> <p>Ich verstehe auch <a href="https://wiki.selfhtml.org/wiki/Datei:Viewports.png" rel="nofollow noopener noreferrer">diese Grafik</a> in <a href="https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Media_Queries#Breakpoints:_Inhalt_.C3.BCber_Design" rel="nofollow noopener noreferrer">diesem Eintrag</a> nicht. Was soll denn damit ausgesagt werden?</p> </blockquote> <p>Dass es sehr sehr viele Abmessungen von Bildschirmen gibt.</p> <blockquote> <p>Was sind realistische Werte?</p> </blockquote> <p>Überlege dir, wie breit ein Text sein sollte, damit man ihn gut erfassen kann. Als negativ-Beispiel kann die Wikipedia auf breiten Bildschirmen gelten.</p> <blockquote> <p>Wieviel Breakpoints sollte man setzen?</p> </blockquote> <p>Im Idealfall keinen, weil du eine Gestaltung verwendest, die ohne auskommt. Sonst eher wenige.</p> <blockquote> <p>Wie kann man das ganze ausprobieren, wenn das über die Größenänderung des Browserfensters nicht mehr funktioniert?</p> </blockquote> <p>Wenn du dich am Inhalt und nicht an Geräteabmessungen orientierst, funktioniert es genau so.</p> <blockquote> <p>Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)</p> </blockquote> <p>Orientiere dich nicht an den Abmessungen irgendwelcher Geräte.</p> <blockquote> <p>Jetzt aber noch eine ganz praktische Frage: In den Beiträgen wird immer wieder erwähnt, dass es – offenbar auch bei Mobile-First – irgendwo eine Abfrage (oder Angabe?) für die Anzeige-Breite für dieses Anzeigendesign bräuchte.</p> </blockquote> <p>Nein, mobile-first bedeutet, dass diese dein "default"-Darstellung ist.</p> <blockquote> <p>Aber wo soll das denn dann stehen, bzw, wo, im style-sheet steht dann dass, was für alle Anzeigekombinationen gilt?</p> </blockquote> <p>Am ANfang, ohne MQ.</p> <blockquote> <p>css @media (min-width: 1024px){</p> <p>.style-logo { float: left; }</p> <p>.style-nav { float: right; } }</p> <pre><code class="block"></code></pre> </blockquote> <p>Float ist für das Umfließen von etwa Grafiken durch Text gedacht, nicht für Gestaltung, dafür gibt es flexbox oder grid. Aber das wäre vielleicht der nächste Schritt.</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761128#m1761128 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T05:54:47Z 2019-12-04T05:54:47Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo salzberg,</p> <blockquote> <p>Warum gibt es dann diese Desktop-Browser Responsive-Ansichten, wenn sie offenbar in keiner Weise zuverlässig sind? (am Mac in Safari wunderschön angelegt, mit einer große Auswahl an aktuellen (Apple-) Geräten... für was das ganze dann?)</p> </blockquote> <blockquote> <p>Ich poste hier mal mein css...</p> </blockquote> <p>Das CSS allein ist ohne das HTML, das es gestalten soll, wenig hilfreich.</p> <p>Eine <a href="https://wiki.selfhtml.org/wiki/HTML/Kopfdaten/meta#Viewport_einstellen" rel="nofollow noopener noreferrer">viewport-Angabe</a> verwendest du?</p> <blockquote> <p>Vielen Dank schon mal und einen schönen Tag euch allen.</p> </blockquote> <p>Ebenso!</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761148#m1761148 Matthias Scharwies (nicht angemeldet) 2019-12-04T11:02:09Z 2019-12-04T11:02:09Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <blockquote> <p>Hallo nochmals,</p> </blockquote> <blockquote> <p>Ich poste hier mal mein css... (immer noch mit Pixel-Angaben, da mir deren erfolgreiche Ersetzung, wie oben erwähnt, einfach noch nicht klar ist) mit der Frage, ob man den Code nun komplett über den Haufen werfen sollte, oder ob er mit stellenweisen Änderungen vielleicht doch noch brauchbar gemacht werden kann.</p> </blockquote> <blockquote> <pre><code class="block language-css">Quelltext hier<span class="token atrule"><span class="token rule">@charset</span> <span class="token string">"UTF-8"</span><span class="token punctuation">;</span></span> <span class="token comment">/* CSS Document */</span> <span class="token selector">html, html *</span> <span class="token punctuation">{</span> <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token property">font-family</span><span class="token punctuation">:</span> Verdana<span class="token punctuation">,</span> Arial<span class="token punctuation">,</span> Helvetica<span class="token punctuation">,</span> sans-serif<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> small<span class="token punctuation">;</span> <span class="token property">font-weight</span><span class="token punctuation">:</span> 400<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">A:hover</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #333333<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <blockquote> <pre><code class="block"></code></pre> </blockquote> <p>Sag mal, könnte es einfach nur ein Rechenfehler sein?</p> <p>Du gibst nur html und dessen Kindelementen (html *) ein box-sizing. Gerade in Navigationen und z.B bei Bildern, die nicht direkte Kindelemente von html sind, gibt es aber noch Abstände in Form von margin, padding und auch border.</p> <p>Probier mal:</p> <pre><code class="block language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">*, ::before, ::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/box-sizing" rel="nofollow noopener noreferrer">CSS/Eigenschaften/box-sizing</a></li> </ul> <p>Und schau mal, wann die Breakpoints umschalten, indem du im Firefox das Browser-Fenster immer weiter zusammenziehst.</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761126#m1761126 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T04:15:04Z 2019-12-04T04:15:04Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo klawischnigg,</p> <blockquote> <blockquote> <p>Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)</p> </blockquote> <p>natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?</p> </blockquote> <p>Solange man gerätespezifisch denkt, schon.</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761127#m1761127 klawischnigg 2019-12-04T04:57:17Z 2019-12-04T04:57:17Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hi there,</p> <blockquote> <blockquote> <blockquote> <p>Also einfach anstelle z.B. 768px dann ???em (Hab' paar Werte probiert... keiner passte...)</p> </blockquote> <p>natürlich nicht, weil das mit Deinem Problem auch nichts zu tun hat. Kann man sich Deine Seite irgendwo anschauen?</p> </blockquote> <p>Solange man gerätespezifisch denkt, schon.</p> </blockquote> <p>Sry, das versteh' ich nicht. Man ersetzt in den Media-query-Angaben einen Wert in px, der nicht passt, durch einen Wert in em, der nicht passt. Damit kann man ein Problem, das seine Ursache offensichtlich woanders hat, nicht lösen. Anstatt reflexartig irgendwelche Pixelangaben durch em oder was auch immer ersetzen zu wollen hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen. Schad' um die Zeit...</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761129#m1761129 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T05:56:15Z 2019-12-04T05:56:15Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo klawischnigg,</p> <blockquote> <p>hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.</p> </blockquote> <p>Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761130#m1761130 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-04T05:58:26Z 2019-12-04T05:58:26Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@Matthias Apsel</p> <blockquote> <blockquote> <p>hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.</p> </blockquote> <p>Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.</p> </blockquote> <p>Das sagte ich doch schon von <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">Anfang</a> an.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761131#m1761131 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T06:01:08Z 2019-12-04T06:01:08Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo Gunnar Bittersmann,</p> <blockquote> <blockquote> <blockquote> <p>hätte man wahrscheinlich eher in die Meta-Angaben der Seite schauen sollen.</p> </blockquote> <p>Ja, das ist mir auf dem Weg zur Arbeit auch in den Sinn gekommen.</p> </blockquote> <p>Das sagte ich doch schon von <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">Anfang</a> an.</p> </blockquote> <p>Aber, da <a href="/users/3833" class="mention registered-user" rel="noopener noreferrer">@Matthias Scharwies</a> das verwendete Tutorial gelobt hat, bin ich davon ausgegangen, dass dies berücksichtigt wurde.</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761141#m1761141 salzberg 2019-12-04T10:01:20Z 2019-12-04T10:01:20Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <blockquote> <p>... bin ich davon ausgegangen, dass dies berücksichtigt wurde.</p> </blockquote> <p>Ja die Meta-Angabe im HTML hatte ich geänder... nur vergessen, das zu erwähnen.</p> <p>Ich hänge hier jetzt doch noch den ganzen HTML-Code rein... mit Platzhaltertexten versehen...</p> <p>Aber jetzt nochmals auf den Punkt gebracht: Auch, wenn diese Site so aufzubauen, offenbar nicht der beste, oder nicht mehr zeitgemäße Weg ist und es auch sonst noch mehrere Möglichkeiten gibt, Seiten für vielerlei Geräte zu optimieren... ... ich denke, auf die Art wie meine (bzw. die von Adobe 10/2016) müste ja eingentlich trotzdem funktioniern... aber sie tut es nicht. am iPhone wird die Tablett-Ansicht angezeigt und am iPad die für den Desktop-Bildschirm. Werden vielleicht doch einfach die Maße der langen Bildschirmseite herangezogen, auch wenn sich das Gerät im Hochformat befindet?</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761142#m1761142 salzberg 2019-12-04T10:07:24Z 2019-12-04T10:07:24Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>oh, code vergessen...</p> <pre><code class="block"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Titel</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <div class="row"> <div class="col"> <p class="style-logo">Studio XX</p> <nav class="style-nav"> <ul> <li><a href="#" target="_blank">galerie</a></li> <li><a href="kontaktdaten">kontakt</a></li> </ul> </nav> </div> </div> </header> <main> <div class="row"> <div class="col"><img src=""bilder\beispielbild.jpg""alt="beispielbild"></div> </div> </main> <footer> <div class="row"> <div class="col"> <p class="footer-text" id="kontaktdaten">Name | Stadt| D | Telefon | e.mail </p> </div> </div> </footer> </body> </html> </code></pre> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761145#m1761145 Matthias Scharwies (nicht angemeldet) 2019-12-04T10:34:15Z 2019-12-04T10:34:15Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <blockquote> <p>... ich denke, auf die Art wie meine (bzw. die von Adobe 10/2016) müste ja eingentlich trotzdem funktioniern... aber sie tut es nicht. am iPhone wird die Tablett-Ansicht angezeigt und am iPad die für den Desktop-Bildschirm. Werden vielleicht doch einfach die Maße der langen Bildschirmseite herangezogen, auch wenn sich das Gerät im Hochformat befindet?</p> </blockquote> <p>Probier mal:</p> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> portrait<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Formate für hochformatige Ausgabemedien */</span> <span class="token punctuation">{</span> <span class="token selector">.style-logo</span> <span class="token punctuation">{</span> <span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation" rel="nofollow noopener noreferrer">Media_Queries#orientation</a></li> </ul> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761146#m1761146 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-04T10:50:19Z 2019-12-04T12:26:44Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@salzberg</p> <blockquote> <p>oh, code vergessen...</p> <pre><code class="block bad language-html"><span class="token doctype"><span class="token punctuation"><!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>… und im Code die Angabe der Sprache: <code class="language-html good"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>de<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> für Deutsch.</p> <hr> <blockquote> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Oh je, Bootstrap?</p> <p>Sollte dann nicht ein Vorfahrenelement von <code>.row</code> die Klasse <code>container</code> haben, also entweder <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> oder <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>?</p> <p>Im zweiten Fall kannst du dir eine Ebene an <code>div</code> sparen:</p> <pre><code class="block language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>col<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>…<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> ⋮ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>header</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>main</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ⋮ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>main</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>footer</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>row<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> ⋮ <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>footer</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>body</span><span class="token punctuation">></span></span> </code></pre> <hr> <blockquote> <pre><code class="block language-html"> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>nav</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>style-nav<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">target</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>_blank<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>galerie<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>kontaktdaten<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>kontakt<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>nav</span><span class="token punctuation">></span></span> </code></pre> </blockquote> <p>Substantive solltest du im Markup groß schreiben: Galerie, Kontakt.</p> <p>Wenn du in der visuellen(!) Darstellung Kleinschreibung möchtest, ist das Sache von CSS:</p> <pre><code class="block language-css"><span class="token selector">.style-nav</span> <span class="token punctuation">{</span> <span class="token property">text-transform</span><span class="token punctuation">:</span> lowercase <span class="token punctuation">}</span> </code></pre> <hr> <blockquote> <p><code class="language-html bad"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span><span class="token punctuation">"</span></span><span class="token attr-name">bilder\beispielbild.jpg""alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>beispielbild<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code></p> </blockquote> <p>Das funktioniert wohl auch nur lokal auf deinem Windows-System. Im Web ist <code class="bad">\</code> falsch, <code class="good">/</code> richtig.</p> <p>Wenn’s denn überhaupt funktioniert; da sind ein paar Anführungszeichen zu viel. Und ein Leerzeichen zu wenig.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761147#m1761147 Matthias Scharwies (nicht angemeldet) 2019-12-04T10:55:34Z 2019-12-04T10:55:34Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <blockquote> <p>Probier mal:</p> </blockquote> <p>Bzw:</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Formate für hochformatige Ausgabemedien */</span> ... <span class="token punctuation">}</span> </code></pre> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation" rel="nofollow noopener noreferrer">Media_Queries#orientation</a></li> </ul> </blockquote> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761154#m1761154 Auge 2019-12-04T11:16:02Z 2019-12-04T11:16:02Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo</p> <blockquote> <p>Sollte dann nicht ein Vorfahrenelement von <code>.row</code> die Klasse <code>container</code> haben, also entwerder <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>header</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code> oder <code class="language-html"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>body</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>container<span class="token punctuation">"</span></span><span class="token punctuation">></span></span></code>?</p> </blockquote> <p>Ich habe in deinem Posting das den Codeabschnitt abschließende Backtick hinter „Klasse <code>container</code>“ gesetzt, damit der Absatz lesbar ist. Die Codeformatierung hat vorher den Rest des Absatzes verhauen (aber nicht verprügelt).</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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761158#m1761158 salzberg 2019-12-04T11:45:29Z 2019-12-04T11:46:45Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>gut aufgepasst...- da hatte ich für das Platzhalter-Bild, unter Windows einfach den Pfad-Abschnitt reinkopiert...</p> <p>Danke...</p> <p>Oh... Antwort einen Post zu tief gerutscht...</p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761160#m1761160 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-04T12:34:00Z 2019-12-04T12:34:00Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@Gunnar Bittersmann</p> <blockquote> <p>Wenn’s denn überhaupt funktioniert; […] ein Leerzeichen zu wenig.</p> </blockquote> <p>Wobei es in (einigen/allen?) Browsern auch ohne Leerzeichen zwischen Attributen funktioniert, wenn die Attributwerte in Anführungszeichen stehen.</p> <p>Bei der <a href="https://cssbattle.dev/" rel="nofollow noopener noreferrer">CSSBattle</a> hatte ich – am Anfang, als SVG noch erlaubt war – so desöfteren ein Zeichen eingespart. Wenn denn die Anführungszeichen um die Attributwerte nötig waren; ansonsten hab ich die zwei Zeichen eingespart.</p> <p>Nichts davon würde ich in Produktivcode tun.</p> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761151#m1761151 Auge 2019-12-04T11:11:01Z 2019-12-04T11:11:01Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo</p> <blockquote> <blockquote> <p>Probier mal:</p> </blockquote> <p>Bzw:</p> <blockquote> <pre><code class="block language-css"><span class="token atrule"><span class="token rule">@media</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1024px<span class="token punctuation">)</span> <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">orientation</span><span class="token punctuation">:</span> landscape<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token comment">/* Formate für hochformatige Ausgabemedien */</span> ... <span class="token punctuation">}</span> </code></pre> <ul> <li><a href="https://wiki.selfhtml.org/wiki/CSS/Media_Queries#orientation" rel="nofollow noopener noreferrer">Media_Queries#orientation</a></li> </ul> </blockquote> </blockquote> <p>Verwechselst du da nicht etwas? Portrait ≙ (entspricht) Hochformat und Landscape ≙ Querformat.</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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761182#m1761182 salzberg 2019-12-04T22:13:07Z 2019-12-04T22:13:07Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Ja, es liegt an den Angaben an dieser Stelle...<br> ...allerdings braucht es beispielsweise:</p> <p><code>@media only screen and (min-width: 768px)</code></p> <p>und wenn das Aussehen für Hoch- und Querformat das selbe sein soll, braucht man wohl:</p> <p><code>min-device-with</code> anstelle <code>min-width</code></p> <p>das ganze lässt sich auch noch mit zusätzlich mit<code>and (max-...)</code>kombinieren.</p> <p>Endlich funktioniert es nun. </p> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761150#m1761150 Gunnar Bittersmann selfhtml@bittersmann.de https://bittersmann.de 2019-12-04T11:08:59Z 2019-12-04T11:08:59Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>@@Matthias Scharwies (nicht angemeldet)</p> <blockquote> <p>Sag mal, könnte es einfach nur ein Rechenfehler sein?</p> <p>Du gibst nur html und dessen Kindelementen (html *) ein box-sizing.</p> </blockquote> <p>Sag mal, könnte es einfach nur ein Denkfehler sein? </p> <p><code> </code> (Leerzeichen) ist der <strong>Nachfahren</strong>-Kombinator. (Der <strong>Kind</strong>-Kombinator ist <code>></code>.)</p> <p>Da alle Elemente außer <code>html</code> selbst Nachfahren von <code>html</code> sind, tut <code>html, html *</code> dasselbe wie <code>*</code> (von der Spezifität abgesehen).</p> <blockquote> <p>Probier mal:</p> <pre><code class="block bad language-css"><span class="token selector">html</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">*, ::before, ::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> inherit<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> </blockquote> <p>Nein, so sollte man das nun gerade nicht machen.</p> <p>Sondern:</p> <pre><code class="block good language-css"><span class="token selector">*, ::before, ::after</span> <span class="token punctuation">{</span> <span class="token property">box-sizing</span><span class="token punctuation">:</span> border-box<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>LLAP </p> <div class="signature">-- <br> <em>„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“<br> „Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“</em><br> —Marc-Uwe Kling </div> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761171#m1761171 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-04T17:04:39Z 2019-12-04T17:04:39Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo Gunnar Bittersmann,</p> <blockquote> <p>tut <code>html, html *</code> dasselbe wie <code>*</code> (von der Spezifität abgesehen).</p> </blockquote> <p>Da wollte ich doch grade fragen, wieso, aber wenn man sich das Wesentliche auf eine Zeile holt, erübrigt sich das (Ich hatte gelesen, <code>html</code> hätte eine andere Spezifität als <code>html *</code>).</p> <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> https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761185#m1761185 Matthias Apsel matthias.apsel@selfhtml.org https://brückentage.info 2019-12-05T04:02:48Z 2019-12-05T04:02:48Z Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... <p>Hallo salzberg,</p> <blockquote> <p>und wenn das Aussehen für Hoch- und Querformat das selbe sein soll, braucht man wohl:</p> </blockquote> <p>… darf man wohl an dieser Stelle keinen Breakpunkt setzen.</p> <blockquote> <p>Endlich funktioniert es nun. </p> </blockquote> <p>Prima.</p> <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>