Re: Mobilgeraete (rant)

Helmut Richter

unread,

Jan 15, 2023, 1:01:09 PM1/15/23

to

On Sun, 15 Jan 2023, Stefan Ram wrote:

> 3 Also Mobilgeräte sollen (Stand ungefähr 2015) Web-Seiten
> für einen hypothetischen Desktop-Bildschirm anzeigen,
> dessen Breite 980px beträgt, und dann entsprechend
> verkleinern. Wer das nicht will, soll den folgenden
> Text in sein HTML einfügen:
>
> <meta name="viewport"
> content="width=device-width, initial-scale=1">

Ich lese das als „Der Bildschirm ist so breit, wie er ist.“

Bei meinen Stylesheets bin ich davon eigentlich ausgegangen, dass dort
umbrochen wird, wo der Rand des Mobilgeräts ist, d.h. der Bildschirm
verhält sich genau gleich wie ein kleines Fenster auf einem großen
Bildschirm. Stattdessen wird willkürlich irgendeine meist viel zu kleine
Schriftgröße gewählt und dafür viel zu früh umbrochen.

Was das Meta soll, verstehe ich nicht, ich habe es aber als „snake oil“
eingesetzt, und seitdem passiert das, was ich eigentlich ohne die magische
Metazeile erwartet hätte. Ich verwende sie nicht aus Überzeugung, sondern
weil ich auch Leser habe, die Mobilgeräte benutzen.

--
Helmut Richter

Peter J. Holzer

unread,

Jan 15, 2023, 1:15:16 PM1/15/23

to

On 2023-01-15 14:58, Stefan Ram <r...@zedat.fu-berlin.de> wrote:
> 3 Also Mobilgeräte sollen (Stand ungefähr 2015) Web-Seiten
> für einen hypothetischen Desktop-Bildschirm anzeigen,
> dessen Breite 980px beträgt, und dann entsprechend
> verkleinern.

Mein Handy hat eine höhere horizontale Auflösung als 980 Pixel. Es
verkleinert die Seite also nicht, es vergrößert sie. Zu klein ist es auf
den meisten Websites trotzdem. Allerdings nicht bei solchen, die
Schriftgröße am Default lassen: Denn die Default-Schriftgröße ist
ausreichend groß (48px?), dass das bequem lesbar ist.
(Getestet mit Chrome und Firefox auf Android)

Und daraus erkennt man schon, dass der nicht einfach so rendert, wie ein
Desktop-Browser bei 980px Fensterbreite rendern würde, sondern diverse
Heuristiken anwendet, um eine Website, die ca. 2005 für den
Internet-Explorer "optimiert" wurde, halbwegs lesbar anzuzeigen.

> Wer das nicht will, soll den folgenden
> Text in sein HTML einfügen:
>
><meta name="viewport"
> content="width=device-width, initial-scale=1">
>

> . Und dazu jetzt einige Bemerkungen von mir:
>
> 4 Erstens gilt das, was ich im zweiten Absatz schrieb.
> Ich werde dies nicht in mein HTML einfügen. Wenn die
> Mobilgeräte meine Seite nicht gut darstellen, obwohl
> es einfaches Basis-HTML mit der Struktur <HTML><BODY>
> Absatz1Absatz2</BODY></HTML> ist, dann
> ist das ihr Problem!

Geräte haben keine Probleme. Menschen haben Probleme. Die Frage ist
also, ist es Dein Problem oder das Problem Deiner User. Ich habe kein
Problem damit, wenn ich Deine Website nicht lesen kann.

Websites, die nur , <hX>, etc. und kein CSS verwenden, sind lesbar.
Vermutlich besser als am Desktop.

Aber sowas will man seinen Usern eher nicht antun, und sobald man
anfängt, irgendwas zu stylen, ist die Viewport-Definition hinzuschreiben
jedenfalls weniger schmerzhaft, als zu versuchen, herauszufinden, was
der Browser genau macht, wenn man das nicht tut.

hp

Peter J. Holzer

unread,

Jan 15, 2023, 2:01:17 PM1/15/23

to

On 2023-01-15 18:01, Helmut Richter <hr.u...@email.de> wrote:
> On Sun, 15 Jan 2023, Stefan Ram wrote:
>> 3 Also Mobilgeräte sollen (Stand ungefähr 2015) Web-Seiten
>> für einen hypothetischen Desktop-Bildschirm anzeigen,
>> dessen Breite 980px beträgt, und dann entsprechend
>> verkleinern. Wer das nicht will, soll den folgenden
>> Text in sein HTML einfügen:
>>
>> <meta name="viewport"
>> content="width=device-width, initial-scale=1">
>
> Ich lese das als „Der Bildschirm ist so breit, wie er ist.“

Ungefähr. Ja.

> Was das Meta soll, verstehe ich nicht,

Das hat Apple erfunden, damit

a) existierende "optimiert für Internet Explorer" Websites am iPhone
halbwegs sinnvoll dargestellt werden und
b) Leute, die sich darüber im Klaren sind, dass es noch andere
Bildschirmgrößen als 1024x768 gibt, dem Browser signalisieren können,
dass sie das bedacht haben.

Schön wäre natürlich gewesen, wenn Webdesigner im Jahr 2007
berücksichtigt hätten, dass es auch User gibt, die nicht den
Internet-Explorer im Vollbildmodus nutzen.

Das war aber nicht die Realität. Und als Newcomer musste Apple
existierende Websites sinnvoll anzeigen können, denn wenn es nicht
funktioniert hätte, hätten die User gesagt "das iPhone ist ein Schaas"
und nicht "90% der Webdesigner sind zu 100% Trotteln".

Die 980px-Emulation by default und die Viewport-Deklaration sind ein
grauslicher Hack. Aber die Realität war halt grauslich. Und MIME oder
Punycode (als andere Beispiele von Hacks, um ossifizierte Protokolle
aufzubohren) sind jetzt auch nicht gerade hübsch.

hp

Helmut Richter

unread,

Jan 15, 2023, 3:16:26 PM1/15/23

to

On Sun, 15 Jan 2023, Peter J. Holzer wrote:

> On 2023-01-15 18:01, Helmut Richter <hr.u...@email.de> wrote:
> > On Sun, 15 Jan 2023, Stefan Ram wrote:
> >> 3 Also Mobilgeräte sollen (Stand ungefähr 2015) Web-Seiten
> >> für einen hypothetischen Desktop-Bildschirm anzeigen,
> >> dessen Breite 980px beträgt, und dann entsprechend
> >> verkleinern. Wer das nicht will, soll den folgenden
> >> Text in sein HTML einfügen:
> >>
> >> <meta name="viewport"
> >> content="width=device-width, initial-scale=1">
> >
> > Ich lese das als „Der Bildschirm ist so breit, wie er ist.“
>
> Ungefähr. Ja.
>
> > Was das Meta soll, verstehe ich nicht,
>
> Das hat Apple erfunden, damit
>
> a) existierende "optimiert für Internet Explorer" Websites am iPhone
> halbwegs sinnvoll dargestellt werden und
> b) Leute, die sich darüber im Klaren sind, dass es noch andere
> Bildschirmgrößen als 1024x768 gibt, dem Browser signalisieren können,
> dass sie das bedacht haben.
>
> Schön wäre natürlich gewesen, wenn Webdesigner im Jahr 2007
> berücksichtigt hätten, dass es auch User gibt, die nicht den
> Internet-Explorer im Vollbildmodus nutzen.

Ich habe meine Stylesheets so entworfen, dass sie mit großer
Wahrscheinlichkeit mit jeder vernünftigen Fenstergröße funktionieren, egal
ob sie zufällig mit der physischen Bildschirmgröße übereinstimmt oder bei
großen Bildschirmen ein Teilfenster davon ist. Nur bei Handys hat das
nicht funktioniert. Mit dem Meta gehts. Ich hab keine Ahnung warum, oder
warum vorher nicht. Mir reichts, dass es geht.

Einziges Zugeständnis, aber schon bisher: Textwüsten haben Abschnitte mit
max-width:48em, damit bei breiten Bildschirmen die Abschnitte mehr als
zwei Zeilen lang sind und die Leute nicht mit dem Kopf wackeln müssen wie
Tennis-Zuschauer. Ich hatte manchmal den Eindruck, dass das auf Handys
veranlasst hat, dass die Schriftgröße so klein ist, dass die 48em (*max*,
nicht *min*!) draufpassen – oder es hatte einen anderen Grund. Jedenfalls
war ohne das Meta die Schriftgröße im Hochformat kleiner als im
Querformat. Mit dem Meta ist sie gleich groß, und es wird so umbrochen,
dass im Querformat weniger, aber längere Zeilen draufpassen als im
Hochformat – ganz genau so wie bei händisch formatierten Fenstern am PC.
Und das ist sinnvoll: Fließtext liest sich hoch besser (Gschmaxach), aber
Tabellen oft quer. Ein Griff und schon passts.

--
Helmut Richter

Peter J. Holzer

unread,

Jan 15, 2023, 4:13:30 PM1/15/23

to

Du schon. Aber die große Mehrheit der Websites damals - auch und gerade
der von großen Firmen - hatte eine fixe Breite von ca. 1000 Pixel.

> Nur bei Handys hat das nicht funktioniert. Mit dem Meta gehts. Ich hab
> keine Ahnung warum, oder warum vorher nicht.

Um eben Websites, die für Desktop-Bildschirme von ca. 2005 designt
wurden, einigermaßen sinnvoll darstellen zu können, rendert der Browser
auf einen virtuellen Canvas von 980px Breite und skaliert das dann.
Damit ist die Schrift bei 16px (oder noch kleiner) natürlich zu klein,
aber das Layout stimmt. und da die meisten Websites damals ein
drei-spaltiges Layout hatten, konnte man durch reinzoomen auf eine
einzelne Spalte die Schrift wieder groß genug machen, um lesbar zu sein.
Dazu kamen noch ein paar andere Heuristiken und Tricks. Funktioniert,
wenn die Website eine typische Website dieser Zeit ist. Geht ziemlich
schief, wenn der Webdesigner kein "Hauptsache die Photoshop-Mockups in
der Präsentation vor dem CEO sehen gut aus"-Designer war sondern HTML
und CSS tatsächlich so verwendet hat, wie es gedacht war.

Mit dem magischen <meta name="viewport"> sagst Du im Wesentlichen dem
Browser: Vertrau mir, ich weiß, was ich mache.

> Einziges Zugeständnis, aber schon bisher: Textwüsten haben Abschnitte mit
> max-width:48em,

Bei Default-Schriftgröße also 768px. Was erklärt, warum "zu früh"
umgebrochen wird (aber 48em auf einem kleinen Handy-Display ist eh schon
zu viel.)

> Ich hatte manchmal den Eindruck, dass das auf Handys veranlasst hat,
> dass die Schriftgröße so klein ist, dass die 48em (*max*, nicht
> *min*!) draufpassen – oder es hatte einen anderen Grund. Jedenfalls
> war ohne das Meta die Schriftgröße im Hochformat kleiner als im
> Querformat.

Erklärung siehe oben.

> Mit dem Meta ist sie gleich groß, und es wird so umbrochen,
> dass im Querformat weniger, aber längere Zeilen draufpassen als im
> Hochformat – ganz genau so wie bei händisch formatierten Fenstern am PC.
> Und das ist sinnvoll: Fließtext liest sich hoch besser (Gschmaxach), aber
> Tabellen oft quer. Ein Griff und schon passts.

Natürlich.

hp

Helmut Richter

unread,

Jan 15, 2023, 4:32:52 PM1/15/23

to

On Sun, 15 Jan 2023, Peter J. Holzer wrote:

> On 2023-01-15 20:16, Helmut Richter <hr.u...@email.de> wrote:

> > Einziges Zugeständnis, aber schon bisher: Textwüsten haben Abschnitte mit
> > max-width:48em,
>
> Bei Default-Schriftgröße also 768px. Was erklärt, warum "zu früh"
> umgebrochen wird (aber 48em auf einem kleinen Handy-Display ist eh schon
> zu viel.)

Es ist bewusst groß gewählt, damit der Benutzer die Wahl hat, ob ers
lieber kleiner haben will. Dann kann er das Fenster verkleinern oder ein
Handy benutzen, und es funktioniert immer noch alles. Der Scrollbalken
kommt erst bei Spielkartengröße oder sehr alten Handys.

Die Beschränkung ist dafür da, dass Texte besser lesbar sind. Im
Einzelfall entscheide ich, ob sie auch für Tabellen und Bilder gilt. Falls
nein, stehen die dann über den Satzspiegel seitlich raus bis zum
Bildschirm- oder Fensterrand. Sieht nicht schön aus, ist aber viel
übersichtlicher für jemanden, der am Inhalt interessiert ist. Wenns ihm
dann nicht gefällt, kann er ja das Fenster verkleinern bis zum
Satzspiegel. Und ist einer sehbehindert, kann er das Ganze aufblasen bis
die Buchstaben 3 cm groß sind und der Umbruch stimmt immer noch.

Egal: ich habe jedenfalls eine Menge dazugelernt. Vielen Dank dafür.

--
Helmut Richter

Peter J. Holzer

unread,

Jan 15, 2023, 5:08:50 PM1/15/23

to

On 2023-01-15 21:32, Helmut Richter <hr.u...@email.de> wrote:
> On Sun, 15 Jan 2023, Peter J. Holzer wrote:
>
>> On 2023-01-15 20:16, Helmut Richter <hr.u...@email.de> wrote:
>
>> > Einziges Zugeständnis, aber schon bisher: Textwüsten haben Abschnitte mit
>> > max-width:48em,
>>
>> Bei Default-Schriftgröße also 768px. Was erklärt, warum "zu früh"
>> umgebrochen wird (aber 48em auf einem kleinen Handy-Display ist eh schon
>> zu viel.)
>
> Es ist bewusst groß gewählt, damit der Benutzer die Wahl hat, ob ers
> lieber kleiner haben will.

Ja, schon klar. Mache ich ja auch so. Ich wollte nur erklären, warum Du
ohne meta-viewport beobachtet hast, dass der Platz nicht ausgenutzt
wird.

hp

Arno Welzel

unread,

Jan 16, 2023, 2:58:42 PM1/16/23

to

Stefan Ram, 2023-01-15 15:58:

[...]> 3 Also Mobilgeräte sollen (Stand ungefähr 2015) Web-Seiten

> für einen hypothetischen Desktop-Bildschirm anzeigen,
> dessen Breite 980px beträgt, und dann entsprechend
> verkleinern. Wer das nicht will, soll den folgenden
> Text in sein HTML einfügen:
>
> <meta name="viewport"
> content="width=device-width, initial-scale=1">

Ja, das ist auch das, was
<https://dev.opera.com/articles/an-introduction-to-meta-viewport-and-viewport/>
beschrieben hat und so ähnlich sollten sich auch aktuelle mobile Browser
verhalten.

> . Und dazu jetzt einige Bemerkungen von mir:
>
> 4 Erstens gilt das, was ich im zweiten Absatz schrieb.
> Ich werde dies nicht in mein HTML einfügen. Wenn die
> Mobilgeräte meine Seite nicht gut darstellen, obwohl
> es einfaches Basis-HTML mit der Struktur <HTML><BODY>
> Absatz1Absatz2</BODY></HTML> ist, dann
> ist das ihr Problem!

Ja, auf den Standpunkt kann man sich stellen. Am Ende sind es dennoch
*deine* Besucher, die mit der Darstellung u.U. Probleme haben. Denen
kannst Du natürlich erklären, dass ihre Browser nicht korrekt arbeiten
und Du deshalb nicht gewillt bist, etwas daran zu ändern. Aber im
Ergebnis ändert sich für den Benutzer nichts - der sieht viele andere
Websites fehlerfrei, nur deine eben nicht.

Wenn Du mobile Geräte unterstützen willst, füge das genannte

im <head> ein und erstelle CSS-Regeln für ein Responsives Layout, bei
dem z.B. mit entsprechenden Media Queries abhängig von der
Viewport-Breite das Layout ggf. angepasst wird als Basis ein flex-grid,
was dann je nach Bedarf ein- oder mehrspaltig dargestellt wird.

Wenn Du das nicht willst - dann lass' es eben.

--
Arno Welzel
https://arnowelzel.de