Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... – SELFHTML-Forum Forum als Ergänzung zum SELFHTML-Wiki und zur Dokumentation SELFHTML https://forum.selfhtml.org/self Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Mon, 02 Dec 19 15:29:04 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761069#m1761069 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761069#m1761069 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Mon, 02 Dec 19 16:07:50 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761072#m1761072 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761072#m1761072 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Mon, 02 Dec 19 17:32:51 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761074#m1761074 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761074#m1761074 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Mon, 02 Dec 19 23:31:49 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761077#m1761077 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761077#m1761077 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 02:48:55 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761078#m1761078 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761078#m1761078 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 07:51:53 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761080#m1761080 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761080#m1761080 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 04:56:02 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761079#m1761079 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761079#m1761079 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 11:16:15 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761087#m1761087 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761087#m1761087 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 00:47:04 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761122#m1761122 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761122#m1761122 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 11:20:32 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761089#m1761089 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761089#m1761089 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 01:49:25 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761123#m1761123 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761123#m1761123 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 08:00:54 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761081#m1761081 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761081#m1761081 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 08:12:39 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761082#m1761082 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761082#m1761082 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Tue, 03 Dec 19 11:51:09 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761092#m1761092 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761092#m1761092 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 02:00:01 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761124#m1761124 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761124#m1761124 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 04:13:55 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761125#m1761125 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761125#m1761125 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 05:54:47 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761128#m1761128 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761128#m1761128 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 11:02:09 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761148#m1761148 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761148#m1761148 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 04:15:04 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761126#m1761126 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761126#m1761126 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 04:57:17 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761127#m1761127 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761127#m1761127 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 05:56:15 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761129#m1761129 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761129#m1761129 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 05:58:26 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761130#m1761130 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761130#m1761130 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 06:01:08 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761131#m1761131 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761131#m1761131 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 10:01:20 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761141#m1761141 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761141#m1761141 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 10:07:24 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761142#m1761142 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761142#m1761142 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 10:34:15 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761145#m1761145 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761145#m1761145 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 10:50:19 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761146#m1761146 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761146#m1761146 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 10:55:34 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761147#m1761147 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761147#m1761147 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 11:16:02 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761154#m1761154 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761154#m1761154 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 11:45:29 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761158#m1761158 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761158#m1761158 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 12:34:00 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761160#m1761160 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761160#m1761160 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 11:11:01 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761151#m1761151 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761151#m1761151 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 22:13:07 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761182#m1761182 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761182#m1761182 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 11:08:59 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761150#m1761150 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761150#m1761150 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Wed, 04 Dec 19 17:04:39 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761171#m1761171 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761171#m1761171 <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> Responsive Design - mein iPhone denkt offenbar es wäre ein Tablet... Thu, 05 Dec 19 04:02:48 Z https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761185#m1761185 https://forum.selfhtml.org/self/2019/dec/02/responsive-design-mein-iphone-denkt-offenbar-es-ware-ein-tablet/1761185#m1761185 <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>