Alexander (HH): Mobiler Browser und einfaches HTML

Moin Moin!

Der Weihnachtsmann hat mir ein Smartphone angeschleppt, ein kleines Samsung mit Android 4.2.2. Damit darf mein alter Nokia-Ziegelstein endlich in Rente.

Ich gehe mit dem Samsung-Browser (stumpf "Internet" genannt) und mit Chrome (40.0.2214.89) auf eine Seite in meinem LAN. Diese hier:

  
<!DOCTYPE html>  
<html>  
 <head>  
  <title>Test</title>  
 </head>  
 <body>  
  <form method="post" action="" enctype="application/x-www-form-urlencoded">  
   <input type="checkbox" name="enabled" value="1">Option eingeschaltet  
   <br>  
   <input type="submit" value="ändern">  
  </form>  
 </body>  
</html>  

Häßlich, einfach, funktioniert mit jedem Desktop-Browser. Die beiden mobilen Browser zeigen die Seite auch an, aber ...

Warum muß das gepixelte Ameisensch...e sein? Ich mache absolut keine Vorgaben zur Gestaltung. Der Browser darf also rendern, wie er es für gut und richtig hält. Warum schaffen es die beiden mobilen Browser nicht, mir die fast leere Seite in einer lesbaren Größe zu präsentieren? Warum müssen beide Browser den wenigen Inhalt in 6 Pixel hoher Schrift auf ein paar mm² quetschen und die restlichen cm² komplett leer lassen?

Kann man den mobilen Browsern irgendwo in den Einstellungen klarmachen, dass sie gefälligst flexibel so viel Bildschirmfläche nutzen sollen, wie vorhanden ist, ohne dass ich mit einer Lupe nach dem Text suchen muß?

Oder Plan B: geht das wenigstens mit einem Stückchen CSS, das ich ohne viel Theater in alle so einfach gestrickten Seiten einbinden kann, ohne mir Gedanken über den Browser machen zu müssen?

Alexander

--
Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
  1. Om nah hoo pez nyeetz, Alexander (HH)!

    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    
    

    sollte helfen.

    Matthias

    --
    Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rum und Rumpelstilzchen.

    1. Moin Moin!

      <meta name="viewport" content="width=device-width, initial-scale=1.0">

      
      > sollte helfen.  
        
      Es hilft! Sehr cool!  
        
      Das ist zwar noch nicht 100% dessen, was ich von einem schlauen Browser für kleine Bildschirme erwartet habe, aber immerhin lesbar und bedienbar. Und recht bequem per Copy&Paste in meinen kleinen häßlichen Tool-Seiten nachrüstbar.  
        
      Danke,  
      Alexander
      
      -- 
      Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
      
  2. Ich gehe mit dem Samsung-Browser (stumpf "Internet" genannt) und mit Chrome (40.0.2214.89) auf eine Seite in meinem LAN. Diese hier:

    Warum muß das gepixelte Ameisensch...e sein? Ich mache absolut keine Vorgaben zur Gestaltung. Der Browser darf also rendern, wie er es für gut und richtig hält.

    Die Browser halten es für gut und richtig, Webseiten, die keine Angaben dazu machen, ob sie auch auf Minibildschirmen brauchbar sind, in einem Feld aufzubauen, das Desktop-Browsern entspricht – und das wird dann komplett auf den Minibildschirm gequetscht.

    In deinem speziellen Fall ist das sicher etwas doof, aber die üblichen Feld-Wald-und-Wiesen-Webseiten würden auf der kleinen Bildschirmgröße in sämtliche Einzelteile zerfallen. Es passen auf den Telefonen halt keine zwanzig Worte nebeneinander, sondern nur zwei oder drei.

    Du kannst den Browsern mittels meta/viewport mitteilen, dass der Bildschirm deines Telefons in der Größe genutzt werden soll, die er tatsächlich hat.

    1. Moin Moin!

      Die Browser halten es für gut und richtig, Webseiten, die keine Angaben dazu machen, ob sie auch auf Minibildschirmen brauchbar sind, in einem Feld aufzubauen, das Desktop-Browsern entspricht – und das wird dann komplett auf den Minibildschirm gequetscht.

      In deinem speziellen Fall ist das sicher etwas doof,

      Sehr doof. Meine Augen werden nicht besser, und ich muß alle Tools der "klein&häßlich"-Klasse anfassen, die ich vom Smartphone aus benutzen will. Nur weil beide Browser zu blöd sind.

      aber die üblichen Feld-Wald-und-Wiesen-Webseiten würden auf der kleinen Bildschirmgröße in sämtliche Einzelteile zerfallen.

      Die üblichen "Standard"-Websites haben meistens irgendwelche Style-Angaben oder irgendwelche gruseligen Pre-CSS-Formatierungen (<font size="-2"> etc.) Sobald so etwas auftritt (CSS oder Pre-CSS), hab ich kaum ein Problem mit der Idee, für einen Desktop zu rendern und dan gnadenlos zu verkleinern.

      Aber hier habe ich die optimale Aufbereitung des Inhalts explizit dem Browser überlassen, HTML also nicht zu einer Seitenbeschreibungssprache vergewaltigt, und genau an dem Punkt versagen IMHO beide Browser. HTML definiert Inhalt, nicht Aussehen, warum wird also der Inhalt so dargestellt, dass ich damit nichts anfangen kann? (OK, rhetorische Frage, bzw. Frage für Google und Samsung.) Noch einfacher gefragt (wieder an Google und Samsung): Warum ist die Standard-Schriftgröße Ameisensch...e statt einer lesbaren Schriftgröße?

      Es passen auf den Telefonen halt keine zwanzig Worte nebeneinander, sondern nur zwei oder drei.

      Das ist klar. Und ich erlaube es dem Browser, die Worte beliebig auf den Bildschirm zu verteilen, und zu lange Texte unten aus dem Bildschirm herauslaufen zu lassen. Einfach dadurch, dass ich mir alle Style-Angaben (CSS oder Pre-CSS), insbesondere alle Größenangaben verkneife.

      Du kannst den Browsern mittels meta/viewport mitteilen, dass der Bildschirm deines Telefons in der Größe genutzt werden soll, die er tatsächlich hat.

      Ja, es hilft. Danke für den Link, ich werde noch etwas mit den Parametern für viewport spielen. Desktop-Browser schaffen es, ohne weitere Hilfen ungestyltes HTML lesbar anzuzeigen. Die beidem mobilen Browser schaffen das nicht. Das ärgert mich.

      Alexander

      --
      Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
      1. @@Alexander (HH):

        nuqneH

        Sehr doof. Meine Augen werden nicht besser, und ich muß alle Tools der "klein&häßlich"-Klasse anfassen, die ich vom Smartphone aus benutzen will. Nur weil beide Browser zu blöd sind.

        Nein, die Browser sind nicht blöd.

        Was blöd ist, sind „Web“seiten, die für eine gewisse Mindestbreite designt sind. (Was ein Oxymoron ist.)

        Und das Blödeste daran: Diese Seiten haben keinerlei Kennzeichnung, dass sie blöd sind. Um diese Myonen von existierenden Seiten dennoch auch Smartphones darzustellen, gehen Browser davon aus, dass ungekennzeichnete Seiten eben blöd sind, setzen die Breite auf 960px und verkleinern, so dass es in den Viewport passt. So erhält der Nutzer einen Überblick und kann dann in die Seite hineinzoomen.

        Wenn man nun als Webseitenautor nicht blöd ist, designt man Seiten so, dass diese sich dem Viewport anpassen. Aus eben genanntem Grund muss man das allerdings dann kenntlich machen – mit einer meta-viewport-Angabe.

        Das ist analog zur DOCTYPE-Angabe: ohne = blöd = Quirksmodus. Will man nicht blöd sein, muss man dies extra kennzeichnen.

        Ansonsten erfüllt die DOCTYPE-Angabe in HTML ja keinen Zweck. HTML-Version und -Variante interessieren den Parser nicht die Bohne; allenfalls den Validator.

        (BTW, es ist ein folgenschwerer Fehler in der HTML5-Spec, dass in <!DOCTYPE html> nichts weiter erlaubt ist. Aber man kann Hixie auch nicht nachsagen, jemals den Sinn von XHTML verstanden zu haben.)

        Die üblichen "Standard"-Websites haben meistens irgendwelche Style-Angaben oder irgendwelche gruseligen Pre-CSS-Formatierungen (<font size="-2"> etc.) Sobald so etwas auftritt (CSS oder Pre-CSS), hab ich kaum ein Problem mit der Idee, für einen Desktop zu rendern und dan gnadenlos zu verkleinern.

        Dann müsste der Browser erst das ganze HTML-Dokument samt allen Stylesheets und am besten auch sämtlichem JavaScript vorrätig haben und parsen, bevor er mit dem Rendern anfangen kann. Nicht das, was man will. Außerdem würde das die Bedingung, wann von blöden Webseiten ausgegangen werden müsste, enorm verkomplizieren.

        HTML definiert Inhalt, nicht Aussehen

        Erzähl das mal den Autoren von Myonen von Seiten seit HTML 2.0.

        Das ist klar. Und ich erlaube es dem Browser, die Worte beliebig auf den Bildschirm zu verteilen, und zu lange Texte unten aus dem Bildschirm herauslaufen zu lassen. Einfach dadurch, dass ich mir alle Style-Angaben (CSS oder Pre-CSS), insbesondere alle Größenangaben verkneife.

        Und dem Browser eben genau das kenntlich machst. Du bist ja nicht blöd.

        Ja, es hilft. Danke für den Link, ich werde noch etwas mit den Parametern für viewport spielen.

        Da gibt’s nichts zu spielen. Verwende die von Matthias genannten Werte! <meta name="viewport" content="width=device-width, initial-scale=1.0"> Keinesfalls dem Nutzer das Zoomen unmöglich machen!

        Desktop-Browser schaffen es, ohne weitere Hilfen ungestyltes HTML lesbar anzuzeigen. Die beidem mobilen Browser schaffen das nicht. Das ärgert mich.

        Wie gesagt, auch <!DOCTYPE html> ist eine solche notwendige Hilfe. Ärgert dich das auch?

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        1. Om nah hoo pez nyeetz, Gunnar Bittersmann!

          Sehr doof. Meine Augen werden nicht besser, und ich muß alle Tools der "klein&häßlich"-Klasse anfassen, die ich vom Smartphone aus benutzen will. Nur weil beide Browser zu blöd sind.

          Nein, die Browser sind nicht blöd.

          Falls der im OP gezeigte Quelltext tatsächlich die Seite ist, dann schon.

          Matthias

          --
          Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Mist und Mistral.

          1. Moin Moin!

            Nein, die Browser sind nicht blöd.

            Falls der im OP gezeigte Quelltext tatsächlich die Seite ist, dann schon.

            Den Quelltext habe ich aus einem kleinen Tool herauskopiert, in eine Datei gepackt, von allem nicht absolut notwendigen Ballast befreit und als Testfall auf meinen LAN-Webserver gepackt. So kann ich immer exakt das selbe Dokument mit verschiedenen Browsern testen. Genau diese Version habe ich auch per Copy&Paste hier gepostet.

            Besonders interessant finde ich, dass die gerade aktuelle Chrome-Version die genauso minimalistische 500er-Fehlerseite des Apachen korrekt darstellt, meine Testseite aber nicht. Der Samsung-Browser scheitert an beiden Dokumenten.

            Alexander

            --
            Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
            1. Hallo

              Besonders interessant finde ich, dass die gerade aktuelle Chrome-Version die genauso minimalistische 500er-Fehlerseite des Apachen korrekt darstellt, meine Testseite aber nicht. Der Samsung-Browser scheitert an beiden Dokumenten.

              Hör doch bitte auf, die ganze Zeit vom Samsung-Browser zu reden. Das ist der Android-Stock-Browser von Google.

              Tschö, Auge

              --
              Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
              Terry Pratchett, "Wachen! Wachen!"
              ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
        2. @@Gunnar Bittersmann:

          nuqneH

          Was blöd ist, sind „Web“seiten, die für eine gewisse Mindestbreite designt sind. (Was ein Oxymoron ist.)

          [ ] Web
          [ ] bestimmte Breite
          [ ] designt

          Wähle zwei, aber nicht alle drei.

          Qapla'

          --
          „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
        3. Hallo Gunnar

          … Aber man kann Hixie auch nicht nachsagen, jemals den Sinn von XHTML verstanden zu haben.)

          Selbst wenn das richtig sein sollte, erklärt es nicht, warum XHTML von niemand weiter entwickelt wurde.

          Mit besten Grüssen
          Richard

        4. Moin Moin!

          Das ist klar. Und ich erlaube es dem Browser, die Worte beliebig auf den Bildschirm zu verteilen, und zu lange Texte unten aus dem Bildschirm herauslaufen zu lassen. Einfach dadurch, dass ich mir alle Style-Angaben (CSS oder Pre-CSS), insbesondere alle Größenangaben verkneife.

          Und dem Browser eben genau das kenntlich machst. Du bist ja nicht blöd.

          "Ein Löffelchen für Mama, ein Löffelchen für Papa, ..."
          Jeder Desktop-Browser schafft das ohne Hilfe. Ist doch auch nicht sonderlich schwer. Flag setzen für "HTML pur", dann beim ersten Stolpern über <link rel="stylesheet">, <style>, <font>, ..., Tags mit style-Attribut das Flag wieder löschen. Ist das Flag danach noch gesetzt, hat man es mit einer stylefreien Webseite zu tun, die gefälligst automatisch lesbar darzustellen ist.

          Ja, es hilft. Danke für den Link, ich werde noch etwas mit den Parametern für viewport spielen.

          Da gibt’s nichts zu spielen. Verwende die von Matthias genannten Werte! <meta name="viewport" content="width=device-width, initial-scale=1.0"> Keinesfalls dem Nutzer das Zoomen unmöglich machen!

          "Dem Benutzer" ist genau das passende Stichwort. Es gibt exakt einen Benutzer. Mich. Keine Suchmachine wird jemals diese Webseiten zu Gesicht bekommen, weil alles innerhalb eines LANs läuft.

          Desktop-Browser schaffen es, ohne weitere Hilfen ungestyltes HTML lesbar anzuzeigen. Die beidem mobilen Browser schaffen das nicht. Das ärgert mich.

          Wie gesagt, auch <!DOCTYPE html> ist eine solche notwendige Hilfe.

          Das ist ein Denkanstoß. Was mag wohl passieren, wenn ich dem Dummfon-Browser Tag-Suppe ohne Doctype (und ohne meta viewport) vorsetze? Frei nach dem Motto "es ist 1995, friß oder strib" - Quirksmode. (30 Sekunden Pause) Tadaa! Der Doctype ist dem Browser völlig egal, es bleibt bei Ameisensch...e.

          Die automatisch vom Apachen generierten Seiten, z.B. bei 404 oder 500, werden genauso schlecht dargestellt. Die sind übrigens als HTML 2.0 deklariert:

            
          <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">  
          <html><head>  
          <title>500 Internal Server Error</title>  
          </head><body>  
          <h1>Internal Server Error</h1>  
          <p>The server encountered an internal error or  
          misconfiguration and was unable to complete  
          your request.</p>  
          <p>Please contact the server administrator at  
           xxx@xxx.xx to inform them of the time this error occurred,  
           and the actions you performed just before this error.</p>  
          <p>More information about this error may be available  
          in the server error log.</p>  
          </body></html>  
          
          

          Auch hier gibt es keinerlei Styling, trotzdem macht der Samsung-Browser daraus eine DIN A10-Seite voll Ameisensch...e oben links auf dem Bildschirm, mit Zeilenumbrüchen mitten in den Absätzen, damit das ganze schön rechteckig ist.

          Man sollte doch annehmen, dass jemand, der einen Browser entwickelt, mal gängige Fehlerseiten rendern läßt.

          Chrome stellt die Seite lesbar dar, mit Text bis zum rechten Bildschirmrand. Ziemlich genau so, wie ich es ursprünglich erwartet habe. Nun hat sich Chrome seit Beginn dieses Threads aber auch schon wieder aktualisiert, auf 40.0.2214.109.

          Das Formular aus dem OP bleibt im Chrome unleserlich, egal ob mit oder ohne Doctype, auch mit dem HTML-2.0-Doctype bleibt es unleserlich. Ganz offenbar gibt es im Chrome eine Sonderregelung, die bei Apache-Fehlerseiten zuschlägt, nicht aber bei meinem Formular.

          Ärgert dich das auch?

          Die Doctype-Angabe ist ein Hinweis, dass sich der HTML-Erzeuger (Mensch/Maschine) an die HTML-Spielregeln halten will und keine 1990er-Tagsuppe abliefert. <!DOCTYPE html> insbesondere zeigt an, dass ich sauberes, modernes HTML5 nutzen will. Völlig analog zum Shebang am Anfang von Unix-Scripten. Das ist optional, aber wenn man keinen Interpreter angibt, muß man damit leben, dass irgendeine obskure Default-Shell versucht, das Script zu interpretieren. Meistens ist das eine Bourne-Shell und für viele einfache Scripte klappt das dann auch. So ticken Unix-Scripte seit den 1970ern. Und nein, das ärgert mich nicht.

          Wie gerade gezeigt, ist dem Samsung-Browser und Chrome der Doctype völlig egal. Selbst wenn ich sage, wir spielen 1990er, ohne Größenangaben, ohne die Größe aus HTML heraus überhaupt beeinflussen zu können, wird zu klein gerendert. Das ärgert mich. Insbesondere, weil Chrome mit der Apache-Fehlerseite zeigt, dass es auch ohne meta viewport geht, wenn der Browser die richtigen Entscheidungen trifft!

          Alexander

          --
          Today I will gladly share my knowledge and experience, for there are no sweeter words than "I told you so".
          1. @@Alexander (HH):

            nuqneH

            Die Doctype-Angabe ist ein Hinweis, dass sich der HTML-Erzeuger (Mensch/Maschine) an die HTML-Spielregeln halten will und keine 1990er-Tagsuppe abliefert. <!DOCTYPE html> insbesondere zeigt an, dass ich sauberes, modernes HTML5 nutzen will.

            Nein.

            Die DOCTYPE-Angabe hatte ursprünglich zwei Funktionen:
            1. die Version der verwendeten Markupsprache anzugeben, optional auch deren Regeln
            2. (in XML) die Regeln im Dokument anzugeben bzw. bestehende Regeln zu ergänzen.

            Bei HTML5 (jetzt auch HTML genannt) gibt es keine Angabe der Version im DOCTYPE. Soll auch gar nicht, weil es (nach dem Willen der WHATWG) gar keine Versionen von HTML5 geben soll.

            Auch die werden keine Referenzen zu den Regeln der Sprache angegeben, bei <!DOCTYPE html> gibt es weder public identifier noch system identifier. Von „Hinweis auf HTML-Spielregeln“ kann also überhaupt keine Rede sein.

            Dummerweise verbietet die HTML5-Spec selbst bei XHTML5 die Erweiterung, bspw. durch selbst definierte Entities.

            Die DOCTYPE-Angabe erfüllt also genau gar keine ihrer Funktionen.

            Das einzige, wozu sie dient, ist als Schalter Quirksmodus aus/ein. Weil irgendwer in grauer Vergangenheit mal dachte, es wäre eine gute Idee, sie dazu zu missbrauchen.

            Eine meta-Angabe wäre dazu besser geeignet gewesen.

            Wie sie eben für 960px-Breite aus/ein verwendet wird.

            Wobei aus Gründen der Abwärtskompatibilität das Fehlen einer Angabe als „ein“ gewertet wird.

            Willst du „aus“ (also „modern“), musst du das eben explizit angeben.

            Qapla'

            --
            „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      2. Hallo

        … HTML definiert Inhalt, nicht Aussehen, warum wird also der Inhalt so dargestellt, dass ich damit nichts anfangen kann? (OK, rhetorische Frage, bzw. Frage für Google und Samsung.)

        Nur mal zur Info: Die Frage [1] richtet sich an Google und Google. Bis zur Version 4.3.x war der Browser, der sich hinter „Internet“ verbirgt, der Standardbrowser von Android. Das ist kein Zusatzprodukt von Samsung.

        [1] Dass dieses Verhalten seine Gründe hat und welche das sind, hat Gunnar ja schon ausgebreitet.

        Tschö, Auge

        --
        Verschiedene Glocken läuteten in der Stadt, und jede von ihnen vertrat eine ganz persönliche Meinung darüber, wann es Mitternacht war.
        Terry Pratchett, "Wachen! Wachen!"
        ie:{ fl:| br:> va:) ls:[ fo:) rl:( ss:| de:> js:| zu:}
      3. Die Browser halten es für gut und richtig, Webseiten, die keine Angaben dazu machen, ob sie auch auf Minibildschirmen brauchbar sind, in einem Feld aufzubauen, das Desktop-Browsern entspricht – und das wird dann komplett auf den Minibildschirm gequetscht.

        HTML definiert Inhalt, nicht Aussehen, warum wird also der Inhalt so dargestellt, dass ich damit nichts anfangen kann?

        Das ist eine Frage der realen Gegebenheiten. Dein Seitenaufbau ist sowas wie ein einzelnes Sandkorn im Watt des Webs – wahrscheinlich wird mit sowas schlicht keiner mehr gerechnet haben.

        Aber wie gesagt: Zweifelsohne ein wenig dumm gelaufen. Ich kann mir auch nicht recht vorstellen, dass Google, Mozilla und Microsoft der Viewport-Erkennung eine Ausnahme hinzufügen für Seiten, die aus HTML ohne <font> & Co. und CSS bestehen.

        Du kannst den Browsern mittels meta/viewport mitteilen, dass der Bildschirm deines Telefons in der Größe genutzt werden soll, die er tatsächlich hat.

        Ja, es hilft. Danke für den Link, ich werde noch etwas mit den Parametern für viewport spielen. Desktop-Browser schaffen es, ohne weitere Hilfen ungestyltes HTML lesbar anzuzeigen. Die beidem mobilen Browser schaffen das nicht. Das ärgert mich.

        Mit der viewport-Angabe, die Matthias kurz vor mir zitiert hat, müsste eigentlich genau das passieren, was du erwartest.