littbarski: Einfache HTML-Website auf mobilen Geräten

Hallo liebes Forum,

ich habe vor einigen Jahren eine Website erstellt, die nur ganz einfach aus 1 HTML-Seite besteht - ohne Menü, Unterseiten, Flash oder Verschachtelungen (1 zentr. div mit Rand links und rechts). Das eignet sich natürlich zunächst einmal ganz gut, um diese Seite auch auf mobilen Geräten anzuzeigen (nicht "echt" responsive, sondern eben aufgrund der Einfachheit). Alle möglichen Emulatoren zeigen die Seite ok an und auch den Google Mobile Test hat sie bestanden. Nun habe ich bei einem Freund gesehen, dass sie auf dem iPad leider extrem schmal angezeigt wird (1/3 der Breite). Die Ränder sind also riesig. Das Gleiche sehe ich auf meinem Android-Tablet im Chrome-Browser. Alle anderen Browser und mir bekannten Tablets und Smartphones (inkl. Apple und Android) gehen gut. Nun berfürchte ich aber natürlich, dass es noch mehr Probleme geben könnte. Daher kopiere ich hier mal meinen (für die Lesbarkeit gekürzten) Code rein, damit ihr seht, wie ich das (als absoluter HTML-Laie) mir das aus Tutorials zusammenkopiert habe. Ich bitte nur um Tipps zum bestehenden Code, da ich keinen größeren Relaunch möchte (Google-Ranking ist perfekt).

Meine Fragen also:

  1. Ich möchte, dass nicht herangezoomt wird auf mobilen Geräte, sondern die Seitenbreite des DIVs angezeigt wird, ist das mit dem Viewport so ok ?

  2. Wenn es ein mobiles Gerät ist, soll die Schrift größer sein, daher die @media Einträge. Kann man das so machen, oder Holzweg ?

  3. Kann man im Code irgendwie sehen, warum auf manchen Geräten dann der Rand rechts und links so riesig ist?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="direction: ltr;" lang="de">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>TITEL</title>
<meta name="author" content="AUTOR">
<meta name="description" content="BESCHREIBUNG">
<meta name="keywords" content="KEYWORDS">

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

@media only screen and (max-device-width:1024px) {body{font-size: 2.2em;}}

@media only screen and (max-device-width:1024px) and (orientation : landscape) {body{font-size: 1.8em;}}

</head>
<body style="color: rgb(0, 0, 0); background-color: rgb(238, 238, 238); direction: ltr;">
<div style="margin: 0pt auto; padding: 50px; font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif; background-color: rgb(255, 255, 255); width: 800px; text-align: left;">
*TEXTE UND INHALTE*
</div>
</body></html>

DANKE! Peter

akzeptierte Antworten

  1. @@littbarski

    nicht "echt" responsive

    Warum nicht?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    Macht nicht wirklich Sinn. Verwende die HTML5-Angabe <!DOCTYPE html>.

    <html style="direction: ltr;" lang="de">

    Die style-Angabe macht keinen Sinn. Wenn, dann wäre dir="ltr" als HTML-Attribut anzugeben. Da ltr aber Default ist, kann das entfallen. (lang="de" ist aber völlig richtig.)

    <meta content="text/html; charset=UTF-8" http-equiv="content-type">

    In HTML5 kannst du dafür einfach <meta charset="UTF-8"> schreiben.

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

    initial-scale=0.1?? Warum sollte dort etwas anderes stehen als 1 (1.0)?

    @media only screen and (max-device-width:1024px) {body{font-size: 2.2em;}}

    @media only screen and (max-device-width:1024px) and (orientation : landscape) {body{font-size: 1.8em;}}

    Das hängt dort in der Luft rum. CSS-Code gehört in ein style-Element, also zwischen <style> und </style> gehört ins Stylesheet.

    <body style="color: rgb(0, 0, 0); background-color: rgb(238, 238, 238); direction: ltr;">

    CSS-Code gehört ins Stylesheet. Zu ltr siehe oben.

    LLAP 🖖

    --
    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
    „Hat auf dem Forum herumgelungert …“
    (Wachen in Asterix 36: Der Papyrus des Cäsar)
    1. Hallo Gunnar Bittersmann,

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

      initial-scale=0.1?? Warum sollte dort etwas anderes stehen als 1 (1.0)?

      Ein Tipfelherr?

      Bis demnächst
      Matthias

      --
      Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
      1. Hallo ihr beiden und vielen Dank für eure raschen Antworten.

        Bezüglich CSS und HTML5 muss ich gestehen, dass ich keine externe CSS-Datei habe und die Website noch vor HTML5 angelegt wurde (und ich wie erwähnt HTML-mäßig wenig weiß). Daher dachte ich, dass ich das nicht einfach "pro forma" zu HTML5 deklarieren darf, wenn ich es nicht in dieser Hinsicht alles angelegt habe. Aber diese beiden Punkte sind aus meiner Sicht viell. unschön, aber nicht kritisch bzgl. Darstellung der Seite.

        Was aber in der Tat nun mein Hauptanliegen betrifft, sind die @media und Zoom-Sachen. Ich habe die Website vor einigen Jahren ganz klein angefangen und nur Bilder und Text hinzugefügt. Nun ist aus der Seite meine Haupt-Anlaufstelle für meine freiberufliche Tätigkeit als Grafiker geworden und ist bei Google wirklich exzellent platziert. Daher habe ich eben Angst, mein Ranking zu ruinieren, wenn ich alles komplett auf Responsive und modernes Template umstelle.

        Zu den Punkten im Einzelnen:

        • Zoom: tja, leider kein Tippfehler :). Ich will eben, dass keinerlei Zoom stattfindet, sondern auch auf kleinen Geräten immer die ganze Seitenbreite erreicht wird. Ist das nicht so in die richtige Richtung gesdacht? Bei scale 1.0 ist die Seite viel zu breit auf mobilen Geräten.

        • @media: Ja, stimmt, das habe ich beim Reinkopieren aus Versehen weggelassen, die beiden Zeilen stehen zwischen <style type="text/css"> und </style>. Aber sonst sieht das ok aus?

        Ehrlichgesagt bin ich ja fast erleichtert, dass ihr mir das mit @media nicht um die Ohren haut :). Aber wie kommt es dann zu den breiten Rändern manchmal? Ich denke, es könnte am Zoom liegen...aber den 0.1 brauche ich doch wie erwähnt...

        Hallo Gunnar Bittersmann,

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

        initial-scale=0.1?? Warum sollte dort etwas anderes stehen als 1 (1.0)?

        Ein Tipfelherr?

        Bis demnächst
        Matthias

        Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)

        1. Hallo

          Bezüglich CSS und HTML5 muss ich gestehen, dass ich keine externe CSS-Datei habe und die Website noch vor HTML5 angelegt wurde (und ich wie erwähnt HTML-mäßig wenig weiß). Daher dachte ich, dass ich das nicht einfach "pro forma" zu HTML5 deklarieren darf, wenn ich es nicht in dieser Hinsicht alles angelegt habe.

          Es gibt in der freien Wildbahn wohl kaum noch Browser, die mit HTML5 nicht umgehen können. Zudem benutzt du ja momentan keine erst mit HTML5 eingeführten Elemente, sondern nur den Doctype. Das ist ungefährlich.

          Solange du nur dein eines HTML-Dokument hast – wie ich es hoffentlich korrekt aus deinem Eröffnungsposting herauslas –, ist es kein Problem, deine CSS-Regeln im Dokumentkopf zu notieren. Das solltest du dann aber auch konsequent umsetzen und nicht noch zusätzliche Style-Angaben in den einzelnen HTML-Elementen verteilen.

          • Zoom: tja, leider kein Tippfehler :). Ich will eben, dass keinerlei Zoom stattfindet, sondern auch auf kleinen Geräten immer die ganze Seitenbreite erreicht wird.

          Was ist für dich „die ganze Seitenbreite“? Für mich wäre das der Bereich mit dem tatsächlichenh Inhalt.

          Ist das nicht so in die richtige Richtung gesdacht? Bei scale 1.0 ist die Seite viel zu breit auf mobilen Geräten.

          Ragt sie seitlich über die Breite des Viewports hinaus? Wenn der Inhalt genau in die Viewport-Breite passen sollte (mit ein paar Pixel Luft zum Rand), stimmt die Breite. Warum sollte auf einem solch kleinen Display überhaupt Platz an einen nutzlosen Rand verschwendet werden? Als Nutzer muss ich dann entweder zoomen – wenn ich denn kann, weil der Anbieter mich lässt – oder mich mit unnötig klein dargestelltem Inhalt rumärgern. …

          … Oder auch nicht, dann bin ich aber auch von der Seite weg. Und zwar für immer.

          Tschö, Auge

          --
          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
          Terry Pratchett, „Gevatter Tod“
          1. @@Auge

            Solange du nur dein eines HTML-Dokument hast – wie ich es hoffentlich korrekt aus deinem Eröffnungsposting herauslas –, ist es kein Problem, deine CSS-Regeln im Dokumentkopf zu notieren.

            Dann wäre das sogar sinnvoll, um einen HTTP-Request zu sparen.

            LLAP 🖖

            --
            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
            „Hat auf dem Forum herumgelungert …“
            (Wachen in Asterix 36: Der Papyrus des Cäsar)
          2. Hallo Auge,

            danke für deine hilfreiche Antwort. Also ich bin ehrlichgesagt sehr froh, dass ich mich heute endlich mal nach Jahren dafür entschieden habe, hier im Forum nicht nur zu lesen, sondern auch zu fragen. Ich dachte eben, dass mein Seitenaufbau dermaßen altbacken ist, dass ich mich kaum nach Tipps zu fragen traute.

            Also: Mit dem CSS bin ich schonmal erleichtert (ja, ist 1 HTML-Seite mit 1 Haupt-DIV). Natürlich gebe ich zu, dass style auch nochmal im html vorkommt, aber ok, ich schau's mir an :). Mit dem HTML5 überlege ich mir das auch gerne nochmal.

            Und nun wieder zum Mobil-Thema: Wie man am DIV (unten in meinem Code-Zitat) sieht, habe ich also einen Inhaltsbereich mit fester Breite und variablen Seitenrändern. Auf breitem Monitor (wie heute üblich) sieht es m.E. besser aus, wenn die Texte nicht ganz von links nach rechts gehen, sondern eben ein Rand rechts und links des DIV besteht. Nun soll der Inhaltsbereich auf mobilen Geräten nicht im Original-Zoom dargestellt werden, sondern so klein, dass der ganze Inhalt (Breite) zu sehen ist. Die Ränder hingegen sind mir bei Mobilgeräten egal. Und bei fast allen Geräten klappt es auch, weil einfach der Rand weggelassen wird. Nur bei Chrome und bei iPad wird der Rand im Gegenteil riesig groß...Können Chrome und iPad viell. nicht mit den Randangaben umgehen?

            Zoomen lasse ich übrigens zu (siehe Code) und die Schrift ist nicht klein, sondern größer (siehe @media).

            Hallo

            Bezüglich CSS und HTML5 muss ich gestehen, dass ich keine externe CSS-Datei habe und die Website noch vor HTML5 angelegt wurde (und ich wie erwähnt HTML-mäßig wenig weiß). Daher dachte ich, dass ich das nicht einfach "pro forma" zu HTML5 deklarieren darf, wenn ich es nicht in dieser Hinsicht alles angelegt habe.

            Es gibt in der freien Wildbahn wohl kaum noch Browser, die mit HTML5 nicht umgehen können. Zudem benutzt du ja momentan keine erst mit HTML5 eingeführten Elemente, sondern nur den Doctype. Das ist ungefährlich.

            Solange du nur dein eines HTML-Dokument hast – wie ich es hoffentlich korrekt aus deinem Eröffnungsposting herauslas –, ist es kein Problem, deine CSS-Regeln im Dokumentkopf zu notieren. Das solltest du dann aber auch konsequent umsetzen und nicht noch zusätzliche Style-Angaben in den einzelnen HTML-Elementen verteilen.

            • Zoom: tja, leider kein Tippfehler :). Ich will eben, dass keinerlei Zoom stattfindet, sondern auch auf kleinen Geräten immer die ganze Seitenbreite erreicht wird.

            Was ist für dich „die ganze Seitenbreite“? Für mich wäre das der Bereich mit dem tatsächlichenh Inhalt.

            Ist das nicht so in die richtige Richtung gesdacht? Bei scale 1.0 ist die Seite viel zu breit auf mobilen Geräten.

            Ragt sie seitlich über die Breite des Viewports hinaus? Wenn der Inhalt genau in die Viewport-Breite passen sollte (mit ein paar Pixel Luft zum Rand), stimmt die Breite. Warum sollte auf einem solch kleinen Display überhaupt Platz an einen nutzlosen Rand verschwendet werden? Als Nutzer muss ich dann entweder zoomen – wenn ich denn kann, weil der Anbieter mich lässt – oder mich mit unnötig klein dargestelltem Inhalt rumärgern. …

            … Oder auch nicht, dann bin ich aber auch von der Seite weg. Und zwar für immer.

            Tschö, Auge

            --
            > Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            > Terry Pratchett, „Gevatter Tod“
            1. Hallo littbarski,

              Können Chrome und iPad viell. nicht mit den Randangaben umgehen?

              Eigentlich können die.

              Vielleicht solltest du deine Seite einfach hier verlinken, dann gibts garantiert hilfreiche Tipps.

              Zoomen lasse ich übrigens zu (siehe Code) und die Schrift ist nicht klein, sondern größer (siehe @media).

              Ich glaube, mit dem Zoomfaktor 1.0 kannst du auf die Mediaqueries, die einfach nur die Schrift vergrößern, verzichten. Aber das kann man erst mit Sicherheit sagen, wenn man die Seite kennt

              PS: Bitte zitiere nicht das komplette Vorposting, sondern nur die Teile, auf die du dich konkret beziehst.

              Bis demnächst
              Matthias

              --
              Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
              1. Hallo Matthias,

                Ich glaube, mit dem Zoomfaktor 1.0 kannst du auf die Mediaqueries, die einfach nur die Schrift vergrößern, verzichten. Aber das kann man erst mit Sicherheit sagen, wenn man die Seite kennt

                PS: Bitte zitiere nicht das komplette Vorposting, sondern nur die Teile, auf die du dich konkret beziehst.

                Ja, ich versuchs, das Zitieren zu verbessern :). Die Schriftvergößerung brauche ich, weil ich den Zoom auf 0.1 stelle...damit die ganze Seitenbreite auf mobilen Geräten dargestellt wird und nicht 1.0, wo ein riesiger horizontaler Scrollbalken dann erscheint. Siehe auch meinen Link im anderen Posting unten!

                1. Hallo

                  Die Schriftvergößerung brauche ich, weil ich den Zoom auf 0.1 stelle...damit die ganze Seitenbreite auf mobilen Geräten dargestellt wird und nicht 1.0, wo ein riesiger horizontaler Scrollbalken dann erscheint. Siehe auch meinen Link im anderen Posting unten!

                  Der horizontale Scrollbalken erscheint, weil du für dein DIV eine feste Breite von 800px vorgibst. Die wirkt natürlich auch dann, wenn der Viewport, wie auf einem Spartphone, sehr viel schmaler ist. Wenn du die Breitenangabe per Media-Query an die Bedingung einer Mindestviewportbreite knüpfst, brauchst du auch die Krücke mit dem initial-scale=0.1 nicht.

                  Tschö, Auge

                  --
                  Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                  Terry Pratchett, „Gevatter Tod“
                  1. Hallo Auge,

                    oder besser

                    <meta name="viewport" content="width=800px">

                    Bis demnächst
                    Matthias

                    --
                    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                    1. Hallo

                      oder besser

                      <meta name="viewport" content="width=800px">

                      Ist die Schrift auf dem Smartphone dann nicht wieder zu klein und muss skaliert werden? Das sieht mir zu sehr nach „rumdoktorn“ aus.

                      Tschö, Auge

                      --
                      Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                      Terry Pratchett, „Gevatter Tod“
                      1. Hallo Auge und Matthias, danke für eure weiteren Tipps, und Auge für die ausführliche Antwort ganz unten.

                        Ich habe es mal mit width=800px und scale=1.0 versucht. Dann passt es beim Chrome auf Android-Tablet, aber bei den anderen Android-Browsern nicht mehr (Scrollbalken, also Seite viel zu breit, trotz 800px-Angabe)...

                        Es scheint einfach eine unterschiedliche Lesart bei Chrome (Android), vermutlich iPad (habe keins zum Testen leider) und dann den anderen Mobilbrowsern zu geben, was das Scale angeht. Am elegantesten wäre natürlich 1.0 und 800px (oder noch besser Gerätebreite), aber in meinem Fall gibt es dann eben unterschiedliche Ergebnisse je nach Browser. Ich muss den besten gemeinsamen Nenner finden, und das ist bei mir derzeit scheinbar Scale 0.1 - viell. finde ich noch heraus, woran das mit dem Rand liegt mit Ausprobieren. Derzeit muss der User eben die Seite ein wenig ranzoomen, dann sieht sie gut aus.

                        <meta name="viewport" content="width=800px">

                        Ist die Schrift auf dem Smartphone dann nicht wieder zu klein und muss skaliert werden? Das sieht mir zu sehr nach „rumdoktorn“ aus.

                        1. Hallo

                          Ich habe es mal mit width=800px und scale=1.0 versucht. Dann passt es beim Chrome auf Android-Tablet, aber bei den anderen Android-Browsern nicht mehr (Scrollbalken, also Seite viel zu breit, trotz 800px-Angabe)...

                          Lasse die feste Breitenangabe einfach weg. Du kannst sie ja per media-Query nur den großen Browserfenstern/-viewports anbieten.

                          Es scheint einfach eine unterschiedliche Lesart bei Chrome (Android), vermutlich iPad (habe keins zum Testen leider) und dann den anderen Mobilbrowsern zu geben, was das Scale angeht.

                          Von Browser zu Browser auf einem Gerät sollte es in dieser Hinsicht keine großen Unterschiede geben. Höchstens von Gerätegröße zu Gerätegröße. Das ist aber normal, das soll so sein.

                          Am elegantesten wäre natürlich 1.0 und 800px (oder noch besser Gerätebreite), aber in meinem Fall gibt es dann eben unterschiedliche Ergebnisse je nach Browser.

                          Hast du die Seite mal mit unterschiedlichen Browsern auf einem Gerät und unter den gleichen Bedingungen getestet?

                          Ich muss den besten gemeinsamen Nenner finden, …

                          Versuche, dich von der Vorstellung, eine Webseite müsse überall (auf allen Geräten und in allen Browsern) identisch aussehen, zu verabschieden. Das muss sie, gerade, was verschiedene Geräteklassen angeht, eben nicht. Das ist ja der Trick bei Responsive Design, eine Seite für unterschiedliche Bedingungen jeweils auf eben diese Bedingungen anzupassen.

                          In einem schmalen Viewport will ich die gesamte Breite für den Inhalt ausnutzen. Eventuell lasse ich auch Teile des Zierrats der Seite weg. Zudem brauche ich, im Verhältnis zum Platzangebot, typischerweise eine Schriftgröße, die die in einem Desktopbrowser bei weitem übersteigt.

                          Auf dem Desktop hingegen kann ich (oft) mit kleineren Schriften arbeiten, kann die Seite meist „luftiger“ und mit mehr Zierrat gestalten. Also unterschiedliche Gestaltung für unterschiedliche Ausgabesituationen.

                          Das ist natürlich nicht eins-zwei-fix erledigt. Es lässt aber auch erahnen, dass das Festhalten an fixen Layouts, die unter allen Umständen zu erhalten sind, schlussendlich, wenn auch gedanklich nicht sofort, einen zusätzlichen Aufwand bedeutet, den man sich nach etwas Einarbeitung in das Thema gut und gerne sparen kann, sparen sollte.

                          Tschö, Auge

                          --
                          Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                          Terry Pratchett, „Gevatter Tod“
                          1. Hallo,

                            Von Browser zu Browser auf einem Gerät sollte es in dieser Hinsicht keine großen Unterschiede geben. Höchstens von Gerätegröße zu Gerätegröße. Das ist aber normal, das soll so sein.

                            Am elegantesten wäre natürlich 1.0 und 800px (oder noch besser Gerätebreite), aber in meinem Fall gibt es dann eben unterschiedliche Ergebnisse je nach Browser.

                            Hast du die Seite mal mit unterschiedlichen Browsern auf einem Gerät und unter den gleichen Bedingungen getestet?

                            Ja, ich habe hier momentan nur ein Android-Tablet mit Firefox, Chrome und Android-Browser sowie Opera Mini. Auf Android-Browser und FF sieht es immer gut aus, auf Chrome und Opera Mini (wobei letzterer ohnehin alles komisch darstellt) sieht es immer anders aus. Z.B. zentriert Chrome auch die Seite nicht und zeigt immer viel mehr Rand an. FF und A-Br. zeigen gar keinen Rand an, lassen ihn also weg. Alles bei genau der gleichen HTML-Seite auf dem gleichen Gerät...

                            Deine anderen Ausführungen stimmen natürlich. Nur wie gesagt: Ich bin ein 1-Mann-Unternehmen mit einer 1-HTML-Seite-Website :). Ich zeige nur Beispielbilder, Referenzen (=Bilder), nenne Kunden und gebe meine Kontaktdaten an. Mehr brauche ich auch nicht. Die Bilder habe ich alle perfekt eingebunden (erscheinen bei Google Bildersuche ganz oben bei den entsprechenden Stichwörtern). Das kann ich unmöglich alles in unterschiedlichen Größen parat halten.

                            Ich teste nochmal alles Mögliche durch und melde mich, wenn ich den Durchbruch habe...

                          2. Das Coolste ist ja übrigens, dass ich den Google Mobile Test mit meinem Konstrukt bestehe und einen Score von 94 habe :-).

                            1. Hallo

                              Das Coolste ist ja übrigens, ...

                              Theorie zum vergessen, entscheidend ist die Praxis.

                              Gruss

                              MrMurphy

                              1. Hallo,

                                das Google-Ranking ist leider heute davon abhängig - Praxis extrem!

                                Hallo

                                Das Coolste ist ja übrigens, ...

                                Theorie zum vergessen, entscheidend ist die Praxis.

                                Gruss

                                MrMurphy

                          3. @@Auge

                            Lasse die feste Breitenangabe einfach weg. Du kannst sie ja per media-Query nur den großen Browserfenstern/-viewports anbieten.

                            Media-Query? Wo wir hingehen, braucht man keine Media-Queries.

                            Keine Breite (width) angeben, sondern eine Maximalbreite (max-width).

                            LLAP 🖖

                            --
                            „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                            „Hat auf dem Forum herumgelungert …“
                            (Wachen in Asterix 36: Der Papyrus des Cäsar)
                            1. Keine Breite (width) angeben, sondern eine Maximalbreite (max-width).

                              meinst du die Breite beim Viewport oder des DIV? Letzteres habe ich vorhin auch probiert, dann sieht die Seite auf dem Android-Browser nicht mehr gut aus, weil sie sogar erhablich schmeler als die maximale Breite angezeigt wird.

                              1. @@littbarski

                                Keine Breite (width) angeben, sondern eine Maximalbreite (max-width).

                                meinst du die Breite beim Viewport oder des DIV?

                                Maximalbreite fürs div (dazu später mehr).

                                Letzteres habe ich vorhin auch probiert, dann sieht die Seite auf dem Android-Browser nicht mehr gut aus, weil sie sogar erhablich schmeler als die maximale Breite angezeigt wird.

                                Bei welcher Viewport-Angabe?

                                Verwende <meta name="viewport" content="width=device-width, initial-scale=1">, nichts anderes.

                                Ich hab deinen Codepen mal geforkt und etwas aufgeräumt: BjRrdV

                                Unter 900(!!) Pixel Viewportbreite schrumpft die weiße Box. (Box-Modell)

                                Im nächsten Schritt entsorgen wir das überflüssige div und geben Breiten in em, nicht in px an: MKmVBg

                                Das sollte weiterhelfen.

                                LLAP 🖖

                                --
                                „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                                „Hat auf dem Forum herumgelungert …“
                                (Wachen in Asterix 36: Der Papyrus des Cäsar)
                                1. Im nächsten Schritt entsorgen wir das überflüssige div und geben Breiten in em, nicht in px an: MKmVBg

                                  Das sollte weiterhelfen.

                                  Ja, und wie! :-) Ich habe die letzten Tage ziemlich viel Zeit in meine Seite investiert und konnte wirklich sehr von deinen Tipps, Gunnar (und auch denen der anderen) profitieren. Insbesondere die Änderung an meinem Code-Beispiel (s.o.) konnte ich gut nachvollziehen. Ich bin eben wirklich Anfänger und weiß eigentlich nicht einmal so genau, was das alles für Tags sind...jetzt sieht alles auf allen mobilen Geräten toll aus und der Google Mobile Score ist 99 :).

                                  Nun habe ich in der Tat das Haupt-DIV einfach entfernt und alle zu breiten Elemente mit einer max-width versehen (und auch viele "Design"-Tabellen entfernt). Nun ist es in der Tat so, dass man den viewport scale auf 1 lassen kann und auch die Schriftvergrößerung nicht mehr wirklich braucht.

                                  Also an alle Laien-Mitleser: Man kann eine Easy-1-HTML-Seite ohne Flash, Menü, @media oder JS auch so einstellen, dass es auf allen mobilen Geräten gut aussieht (der Inhaltsbereich wird nämlich dann einfach zusammengeschoben).

                                  Gunnar, eine letzte Frage hätte ich noch zu der max-width: 50em; des body. Was ist der Vorteil gegenüber einer px Angabe dafür? Und muss man etwas speziell dabei beachten? Ich vermute, es hängt also von der Schrift ab. Meine Schrifteinstellungen sind so:

                                  h1 {
                                  font-weight: normal;
                                  font-style: normal;
                                  text-transform: none;
                                  font-size: 1.5em;
                                  font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                  }
                                  h2 {
                                  font-weight: normal;
                                  font-style: normal;
                                  text-transform: none;
                                  font-size: 1.25em;
                                  font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                  }
                                  h3 {
                                  font-weight: normal;
                                  font-style: normal;
                                  text-transform: none;
                                  font-size: 1em;
                                  font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                  }
                                  html
                                  {
                                    color: rgb(0, 0, 0);
                                    background-color: rgb(238, 238, 238);
                                    padding: 0.5em;
                                  }
                                  body
                                  { 
                                  margin: auto;
                                  padding: 50px;
                                  font-family: Calibri, Geneva, 'Trebuchet MS', Helvetica, Arial, sans-serif;
                                  background-color: rgb(255, 255, 255);
                                  max-width: 55em;
                                  font-weight: normal;
                                  font-size: 100%;
                                  font-style: normal;
                                  text-transform: none;
                                  text-align: left;
                                  
                                  

                                  Und da sehe ich doch noch eine Frage :) - du schreibst, dass das hier bei HTML5 nicht mehr nötig ist, wie heißt der Tag dann korrekt? <style type="text/css">

                                  1. Hallo littbarski,

                                    h1 {
                                    font-weight: normal;
                                    font-style: normal;
                                    text-transform: none;
                                    font-size: 1.5em;
                                    font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                    }
                                    h2 {
                                    font-weight: normal;
                                    font-style: normal;
                                    text-transform: none;
                                    font-size: 1.25em;
                                    font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                    }
                                    h3 {
                                    font-weight: normal;
                                    font-style: normal;
                                    text-transform: none;
                                    font-size: 1em;
                                    font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                    }
                                    

                                    lässt sich zusammenfassen zu

                                    
                                    h1, h2, h3 {
                                        font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                    }
                                    h1 {
                                        font-size: 1.5em;
                                    }
                                    h2 {
                                        font-size: 1.25em;
                                    }
                                    h3 {
                                        font-size: 1em;
                                    }
                                    

                                    Die anderen Angaben sind die default-Werte, also die, die der Browser verwendet, wenn keine oder ungültige Werte angegeben werden.

                                    html
                                    {
                                      color: rgb(0, 0, 0);
                                      background-color: rgb(238, 238, 238);
                                      padding: 0.5em;
                                    }
                                    body
                                    { 
                                    margin: auto;
                                    padding: 50px;
                                    font-family: Calibri, Geneva, 'Trebuchet MS', Helvetica, Arial, sans-serif;
                                    background-color: rgb(255, 255, 255);
                                    max-width: 55em;
                                    font-weight: normal;
                                    font-size: 100%;
                                    font-style: normal;
                                    text-transform: none;
                                    text-align: left;
                                    
                                    

                                    Hier noch mal dasselbe. Und da Angaben zur Schrift automatisch vererbt werden, reicht:

                                    html {
                                        background-color: rgb(238, 238, 238);
                                        padding: 0.5em;
                                        font-family: Calibri, Geneva, 'Trebuchet MS', Helvetica, Arial, sans-serif;
                                    }
                                    body {
                                        margin: auto;
                                        padding: 50px;
                                        background-color: rgb(255, 255, 255);
                                        max-width: 55em;
                                    }
                                    h1 {
                                        font-size: 1.5em;
                                    }
                                    h2 {
                                        font-size: 1.25em;
                                    }
                                    h3 {
                                        font-size: 1em;
                                    }
                                    

                                    Und da sehe ich doch noch eine Frage :) - du schreibst, dass das hier bei HTML5 nicht mehr nötig ist, wie heißt der Tag dann korrekt? <style type="text/css">

                                    ohne Angabe eines Types. text/css ist der default-wert, also der, den die … s.o.

                                    Bis demnächst
                                    Matthias

                                    --
                                    Das Geheimnis des Könnens liegt im Wollen. (Giuseppe Mazzini)
                                    1. Hallo

                                      h1, h2, h3 {
                                          font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                      }
                                      h1 {
                                          font-size: 1.5em;
                                      }
                                      h2 {
                                          font-size: 1.25em;
                                      }
                                      h3 {
                                          font-size: 1em;
                                      }
                                      

                                      Die anderen Angaben sind die default-Werte

                                      Der Standardwert von font-weight für Überschriften ist „bold“. Wenn Littbarski also font-weight: normal; haben will, wovon nach seinem Code auszugehen ist, muss das auch in der Zusammenfassung angegeben werden.

                                      h1, h2, h3 {
                                          font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif;
                                          font-weight: normal;
                                      }
                                      

                                      Ansonsten: ACK

                                      Tschö, Auge

                                      --
                                      Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                                      Terry Pratchett, „Gevatter Tod“
                                      1. danke euch beiden vielmals! Ja, das lässt sich also doch etwas vereinfachen :). Zum Glück baue ich nur Überflüssiges in meinen "Code" ein, nichts, was die Seite kaputt macht... Ja, die Überschriften sind in der Tat nicht fett, sondern eben nur größer. Bezüglich des anderen Tags: schreibt man also das so? (also statt <style type="text/css"> etc.)

                                        <style>
                                        html {
                                            background-color: rgb(238, 238, 238);
                                            padding: 0.5em;
                                            font-family: Calibri, Geneva, 'Trebuchet MS', Helvetica, Arial, sans-serif;}
                                        </style>
                                        
                          4. Und nochmals kurz Hallo,

                            ich mach jetzt Feierabend :). Aber ich habe nun mit einem Initial Scale von 0.4 den besten Kompromiss gefunden, sieht auf Tablet, Smartphone und iPad ok aus. Der Desktop-Chrome hat ja eine gute Funktion, um Geräte zu emulieren, habe ich gerade erst gefunden.

                    2. @@Matthias Apsel

                      oder besser

                      <meta name="viewport" content="width=800px">

                      Viel besser ist das aber auch nicht; die Box ist doch (einschließlich Padding) 900 Pixel breit.

                      LLAP 🖖

                      --
                      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                      „Hat auf dem Forum herumgelungert …“
                      (Wachen in Asterix 36: Der Papyrus des Cäsar)
        2. @@littbarski

          Daher dachte ich, dass ich das nicht einfach "pro forma" zu HTML5 deklarieren darf

          Darfst du. HTML5 ist bewusst abwärtskompatibel. Ein valides HTML-4.01-Strict-Dokument sollte auch ein valides HTML5-Dokument sein.

          Nun ist aus der Seite meine Haupt-Anlaufstelle für meine freiberufliche Tätigkeit als Grafiker geworden

          Das sollte doch Grund sein, dass die Seite auf verschiedensten Geräten jeweils an diese angepasst visuell ansprechend dargestellt wird. Also responsive design.

          und ist bei Google wirklich exzellent platziert. Daher habe ich eben Angst, mein Ranking zu ruinieren, wenn ich alles komplett auf Responsive und modernes Template umstelle.

          Google Eine Suchmaschine interessiert sich in erster Line für Inhalte, nicht für Präsentation. Und wenn „modernes Template“ heißt, im Markup in HTML5 neue Elemente wie main, header, footer, section, aside etc. zu verwenden, dann sollte das auch die Suchmaschine erfreuen, da sie den Inhalt besser bewerten kann.

          Auch ist es so, dass inbesondere Google nicht-mobile-taugliche Seiten abwertet.

          <style type="text/css">

          In HTML5 ist type="text/css" überflüssig.

          Ich denke, es könnte am Zoom liegen...aber den 0.1 brauche ich doch wie erwähnt...

          ?? Kannst mal bitte deine Seite verlinken, damit man sich das ansehen kann? (Oder ein Online-Beispiel bereitstellen.)

          LLAP 🖖

          PS: Bitte kein TOFU.

          --
          „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
          „Hat auf dem Forum herumgelungert …“
          (Wachen in Asterix 36: Der Papyrus des Cäsar)
          1. Hallo zusammen und danke für die neuen Antworten.

            Tut mir leid, wenn ich das Foren-Handwerk noch nicht so beherrsche. Ich zitiere nicht mehr alles jetzt :).

            ?? Kannst mal bitte deine Seite verlinken, damit man sich das ansehen kann? (Oder ein Online-Beispiel bereitstellen.)

            Es ist für einen (wenn auch kleinen) Grafiker nicht so gute Werbung, hier so Anfängerfragen zu stellen, daher verlinke ich die Seite lieber nicht und hoffe auf Verständnis. Ich habe den Code spontan hier mal hochgeladen: Code-Demo

            Meine Website enthält wirklich nicht mehr, außer dass dann eben Texte und Bilder drin sind.

            1. Hallo

              Aus deinem Beispiel ist das Problem leider nicht ersichtlich.

              Ich kann auch deine Angst nicht nachvollziehen hier den Link zu der Seite zu zeigen. Millionen von Menschen können und dürfen die Seite finden und sehen, aber ausgerechnet diejenigen, die dir helfen wollen, nicht? Was ist denn das für eine Logik?

              Gruss

              MrMurphy

              1. Hallo

                Aus deinem Beispiel ist das Problem leider nicht ersichtlich.

                Doch, doch, wenn auch erst bei genauerem Hinschauen. Der Übeltäter heißt, wie bereits in einem anderen Posting geschrieben, width: 800px;.

                div style="margin: 0pt auto; padding: 50px; font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif; background-color: rgb(255, 255, 255); text-align: left;">
                

                Ohne diese Angabe und mit initial-scale=1 sieht die Beispielseite auch bei schmalem Viewport ordentlich aus. Wie das mit den originalen Inhalten aussieht, steht auf einem anderen Blatt. Da können weitere Anpassungen nötig sein.

                Tschö, Auge

                --
                Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                Terry Pratchett, „Gevatter Tod“
                1. Hallo Auge und herzlichen Dank für deine erneute Hilfe. Ja, das mit den 800px ist vermutlich der Übeltäter für die Scrollbalken. Ich kann schauen, ob ich das ändere, aber Bilder sind ja auch oft breiter als der schmale Viewport eines Smartphones, daher hab ich die Krücke des 0.1 Scale entdeckt, die ja auch fast überall klappt.

                  Ansonsten habe ich jetzt schon sehr viele Fragen beantwortet bekommen und ich kann meine Seite nun viel besser einschätzen und korrigieren, das freut mich sehr.

                  Bleibt für mich nur die Frage, warum ein iPad (und ein Chrome auf Android) diesen Code so interpretiert, dass der Rand extrem riesig sein muss :). Kann man denn den Rand so einstellen, dass er z.B. (jeweils rechts und links) max. halb so groß ist wie das DIV breit ist?

                  Doch, doch, wenn auch erst bei genauerem Hinschauen. Der Übeltäter heißt, wie bereits in einem anderen Posting geschrieben, width: 800px;.

                  div style="margin: 0pt auto; padding: 50px; font-family: Calibri,Geneva,'Trebuchet MS',Helvetica,Arial,sans-serif; background-color: rgb(255, 255, 255); text-align: left;">
                  

                  Ohne diese Angabe und mit initial-scale=1 sieht die Beispielseite auch bei schmalem Viewport ordentlich aus. Wie das mit den originalen Inhalten aussieht, steht auf einem anderen Blatt. Da können weitere Anpassungen nötig sein.

                  1. Hallo

                    Ja, das mit den 800px ist vermutlich der Übeltäter für die Scrollbalken. Ich kann schauen, ob ich das ändere, aber Bilder sind ja auch oft breiter als der schmale Viewport eines Smartphones, daher hab ich die Krücke des 0.1 Scale entdeckt, die ja auch fast überall klappt.

                    Dafür gibt es mittlerweile auch Methoden, mit denen je nach Viewportgröße unterschiedliche Dateien geladen werden. Damit kann man unterschiedlich große Bilder laden lassen. Allerdings ist dazu zu sagen, dass es mehrere konkurrierende Methoden gibt [1], die natürlich eine unterschiedliche Unterstützung durch die Browser erfahren [2].

                    Ansonsten habe ich jetzt schon sehr viele Fragen beantwortet bekommen und ich kann meine Seite nun viel besser einschätzen und korrigieren, das freut mich sehr.

                    Schön.

                    Bleibt für mich nur die Frage, warum ein iPad (und ein Chrome auf Android) diesen Code so interpretiert, dass der Rand extrem riesig sein muss :).

                    <spekulation>Ist das Display und damit der Browserviewport dort so groß, dass er die Desktopregeln befolgt?</spekulation>

                    Kann man denn den Rand so einstellen, dass er z.B. (jeweils rechts und links) max. halb so groß ist wie das DIV breit ist?

                    Du könntest die Breiten und die Ränder mit calc berechnen lassen. Gehe aber davon aus, dass du bei deinen Wunschwerten (25%, 50%, 25%) Nebenwirkungen haben wirst, die du bisher noch nicht erahnt hast und die du auch nicht beheben müssen willst.

                    Tschö, Auge

                    PS: Auch wenn's in Wiederholung nervt, lösche die Teile des zu beantwortenden Vorpostings, auf die du dich nicht beziehen willst.

                    --
                    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                    Terry Pratchett, „Gevatter Tod“

                    1. Ein paar Links: responsiveimages.org, Alistapart, Using Responsive Images (Now) ↩︎

                    2. Can I Use? ist ein empfehlenswertes Werkzeug zur Ermittlung der Unterstützung von features in Browsern. Einfach den Namen des Features in den Suchschlitz eingeben oder selbiges in der Liste suchen und Link aufrufen, schon hast du die notwendigsten Infos. ↩︎

                    1. @@Auge

                      […] unterschiedlich große Bilder laden lassen. Allerdings ist dazu zu sagen, dass es mehrere konkurrierende Methoden gibt

                      srcset und picture konkurrieren nicht miteinander; sie ergänzen sich. In vielen Fällen wird man mit srcset und sizes hinkommen; für art direction dann picture/source.

                      LLAP 🖖

                      --
                      „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                      „Hat auf dem Forum herumgelungert …“
                      (Wachen in Asterix 36: Der Papyrus des Cäsar)
                  2. @@littbarski

                    aber Bilder sind ja auch oft breiter als der schmale Viewport eines Smartphones

                    img { max-width: 100% } wirkt da Wunder.

                    daher hab ich die Krücke des 0.1 Scale entdeckt, die ja auch fast überall klappt.

                    Eine Krücke klappt nicht; die bricht.

                    LLAP 🖖

                    --
                    „Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
                    „Hat auf dem Forum herumgelungert …“
                    (Wachen in Asterix 36: Der Papyrus des Cäsar)
                    1. Hallo.

                      … Krücke …

                      nur zur Info: die Dinger heißen Unterarmstützen, Krücke nennt man das dazwischen. :)

                      Gruß Jürgen

                    2. hallo Gunnar,

                      danke für die vielen neuen Antworten, ich habe erst am Montag wieder Zeit, mich genauer damit zu befassen, aber beim Überfliegen habe ich gesehen, dass du mir wieder mal einiges an Wissen zugetan hat :). Ich denke, das kann ich gut gebrauchen.

                      @@littbarski

                      aber Bilder sind ja auch oft breiter als der schmale Viewport eines Smartphones

                      img { max-width: 100% } wirkt da Wunder.