@media funktioniert am PC Bildschirm, aber nicht am Smartphone

[Eddi]

Guten Abend,

es gibt keine fixe Bidlschirmbreite, am PC-Bildschirm funktioniert @media. Je nachdem, wie ich das Fenster ziehe, verändert sich die Schriftgröße. Nicht so am Smartphone, da wird immer und direkt die kleine Größe von 60 % angezeigt.

Warum?

Danke!

Eddi

Ausschnitt:

<meta name="viewport" content="width=device-width", initial-scale=1, user-scalable=yes">

<style type="text/css">
body {
   <!--width: 70em;  -->
   padding: 0;
   font-size: 16px; <!-- 1 em -->
   line-height:1.4;
   color: black;
   background-color: #FFFFFF;
   align: center;
}

@media(min-width:700px){body{font-size: 60%;}}

[Gunnar Bittersmann]

@@Eddi

<meta name="viewport" content="width=device-width", initial-scale=1, user-scalable=yes">

Wenn du Code als solchen auszeichnest (Ich hab das mal für dich berichtigt. Das nächste Mal bitte selber, wie in der Hilfe Formatierung_der_Beiträge angegeben bzw. mit </>-Button überm Eingabefeld), dann zeigt dir der Syntax-Highlighter an, dass da was nicht stimmt. (Oft lügt er, in dem Fall aber nicht.) Zähle mal die Anführungszeichen!

<style type="text/css">
body {
   <!--width: 70em;  -->

HTML-Kommentarzeichen werden vom CSS-Parser ignoriert, d.h. die Angabe width: 70em; wird berücksichtigt. Kommentare in CSS gehen anders.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

Zähle mal die Anführungszeichen

Nicht nur die…

Rolf

[Eddi]

Guten Tag,

bitte was soll ich noch zählen?

Danke!

Eddi

[Rolf B]

Hallo Eddi,

sorry, ich lag falsch. Das rot formatierte Komma hat mich irritiert.

Rolf

[Eddi]

Hallo,

danke für deine Rückmeldung. Den Fehler habe ich korrigiert.

Hilft leider aber nicht.

Die Zeile @media(min-width:700px){body{font-size: 80%;}} wirkt sich immer noch auch auf das Smartphone aus, obwohl sie das nicht sollte.

Eddi

[Rolf B]

Hallo Eddi,

hast Du die Seite irgendwo online?

Bei Smartphones ist zu beachten, dass Du da nicht mit Bildschirmpixeln hantierst, sondern mit CSS Pixeln. Grund sind die hochauflösenden Displays vieler Smartphones. Würde man deren Pixel einfach so an die App weitergeben, bräuchte man eine Lupe. Ein Display mit FullHD Auflösung (oder mehr) kann für CSS durchaus nur 640x360 Pixel haben.

Deswegen ist es besser, Pixel zu vergessen. Es ist auch besser, die Fontsize dem User zu überlassen und nicht willentlich zu verkleinern. Denk an die Leute, die keine Adleraugen haben. Wer gut lesen kann, kann im Browser die Textgröße verkleinern, und bekommt dann ggf. deine Ansicht für breitere Displays.

Auf vielen Displays ist 1em=16px - aber das ist nicht garantiert! Der User kann etwas anderes eingestellt haben, oder der Browser hat, wegen des DPI-Wertes des Displays, aus Ergonomiegründen etwas anderes gesetzt.

Steuere deine Media-Breaks besser mit em oder rem statt Pixeln.

Das hilft Dir bei deinem Problem natürlich nicht weiter. Was da los ist, kann ich nicht sagen (jemand anderes vielleicht schon?!), darum die Frage ob die Seite online ist.

Rolf

[Eddi]

Guten Abend,

alles bisschen verwirrend für mich mit den verschiedenen Möglichkeiten Schriftgrößen festzulegen und dann noch auf Smartphone und PC schön zu machen.

Meine Seite: www.wahlkreis149.de

Die oberste Menüzeile bitte mal vergessen, dazu frage ich gesondert.

Danke!

Eddi

[Rolf B]

Hallo Eddi,

oha. Deine HTML Kenntnisse sind auf dem Stand von 2000, wie es aussieht. Beschäftige Dich mal mit modernem HTML, unser Wiki kann helfen.

1. Frames: Out, total out, sind in HTML5 missbilligt (deprecated). Und warum ein Frameset mit nur einem Frame drin? Die einzige Wirkung ist, dass man wahlkreis149.de aufruft und deine eigentliche Seite zu sehen bekommt. Welchen Zweck verfolgst Du damit? Ich hoffe, dass man den durch bessere Mittel erreichen kann.

2. <!-- und --> sind HTML Kommentare. Innerhalb eines Style-Bereichs gelten sie nicht. Dort musst Du die CSS Kommentarzeichen /* und */ verwenden.

3. Dein media-Addon greift erfolgreich bei einer Breite, die größer gleich 700 Pixel ist, zumindest auf meinem Desktop. Du sagst, er greift auch auf deinem Smartphone? Welches ist das? Welcher Browser? Ruf mal http://www.mydevice.io auf. Was sagt der Dir über dein Smartphone?

Rolf

[Eddi]

Guten Abend, lieber Rolf!

Vielen Dank für deine Hilfe!!

"Frames" habe ich nicht bewusst genutzt, finde sie zumindest auch nicht in einem Code. Berührt das mein Problem bzgl. nicht angepasster Breite bei Smartphones.

Den Link mydevice verstehe ich nicht. Ich nutze ein Sony Z1.

"<!-- und -->" kann ich gerne ersetzen. Allerdings markiert mir mein Editor bislang diese Kommentar-Eingaben mit grün, also anders als den wirksamen Code. Mit deinem Vorschlag tut er das nicht mehr. Probiere ich aber trotzdem, hat auch funktioniert. Danke!

Danke!

Edgar Gättner

[Rolf B]

Hallo Eddi,

was ist denn das hier, unter www.wahlkreis149.de? Ein Frameset. Und es bindet genau einen Frame ein.

<html>
    <head>
        <title>www.wahlkreis149.de</title>
    </head>
    <frameset BORDER='0' frameborder='0' framespacing='0' rows='100%,*'>
        <frame name='target' src='http://www.xn--gttner-bua.de/wahlkreis149'>
            <noframes>...</noframes>
    </frameset>
</html>

Dieses HTML hat zwei Probleme. Erstens: Frameset ist ein Relikt aus HTML 4 und braucht demzufolge auch einen HTML 4 Frameset Doctype. Du hast aber gar keinen angegeben (was bei HTML 5 okay ist und bei HTML 4 zum Quirksmode geführt hätte). Zweitens: frameset ist deprecated (missbilligt), nicht mehr Teil des HTML Standards und kann daher - rein theoretisch - jederzeit von einer neueren Browserversion nicht mehr verstanden werden.

Alternativen:

(1) Bringe unter www.wahlkreis149.de eine Weiterleitungs-Seite unter, die zur "richtigen" Seite umleitet. Diese Seite kann mit einer <meta http-equiv="refresh" content="0;url=http://www.gättner.de/wahlkreis149"> Angabe im <head> Bereich auf die gewünschte Seite umleiten, sollte aber auch einen Body mit einem Link dorthin enthalten, weil meta refresh vom User blockiert werden kann. (2) Ersetze das frameset durch einen iframe, den Du per CSS auf 100% Breite und Höhe des Viewports einstellst. (3) Bringe deine Seite sofort unter www.wahlkreis149.de unter. Warum eine leere Hülle unter einer URL und den Inhalt woanders?

Aber - nein, das hat mit dem eigentlichen Problem nichts zu tun. Das war einfach ein Hinweis auf ein grundsätzliches Problem, das deine Seite hat (neben einigen anderen, wie z.B. dieses merkwürdige target="_blank" in deiner Navigation, der Umstand, dass die angesprungene Überschrift hinter der Navi verschwindet, Schreibfehler in Dateinamen die mit einem HTTP redirect "repariert" werden und VIEL zu viel Inhalt auf einer einzigen Seite). Wenn Du diese Hinweise nicht willst, ok, deine Sache.

Dein eigentliches Problem habe ich noch nicht identifiziert, darum die Bitte, mit dem Smartphone die mydevice.io Seite aufzurufen. Dann bekommst Du Informationen darüber, mit welchen Abmessungen sich dein Display gegenüber dem Browser präsentiert. Und das ist wichtig für die Bemessung von Media-Breaks.

Was ich übrigens merkwürdig finde, ist deine Entscheidung, bei einem kleineren Bildschirm die Schrift zu vergrößern. Absicht? Oder Versehen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Erstens: Frameset ist ein Relikt aus HTML 4 und braucht demzufolge auch einen HTML 4 Frameset Doctype.

Nein. Wozu?

Du hast aber gar keinen angegeben (was bei HTML 5 okay ist und bei HTML 4 zum Quirksmode geführt hätte).

Keine DOCTYPE-Angabe führt auch bei HTML5 zum Quirksmodes.

frameset ist deprecated (missbilligt), nicht mehr Teil des HTML Standards und kann daher - rein theoretisch - jederzeit von einer neueren Browserversion nicht mehr verstanden werden.

Rein theoretisch. Praktisch wird kein Browserhersteller die Unterstützung von Framesets ausbauen.

(1) Bringe unter www.wahlkreis149.de eine Weiterleitungs-Seite unter, die zur "richtigen" Seite umleitet. Diese Seite kann mit einer <meta http-equiv="refresh" content="0;url=http://www.gättner.de/wahlkreis149"> Angabe im <head> Bereich auf die gewünschte Seite umleiten

Wenn man eine Weiterleitung will, dann sollte man die serverseitig einrichten: Redirect

(2) Ersetze das frameset durch einen iframe, den Du per CSS auf 100% Breite und Höhe des Viewports einstellst.

Welche Verbesserung sollte diese Ersetzung bringen?

Dein eigentliches Problem habe ich noch nicht identifiziert

Nicht? Für body ist eine feste Breite angegeben: width: 70em. Da sollte es nicht wundern, dass body eine feste Breite hat.

LLAP 🖖

[Rolf B]

Hallo Gunnar,

ich bin bisher immer davon ausgegangen, dass eine Frameset-Seite auch einen HTML Frameset-Doctype braucht, um valide zu sein. Wozu gibt's diesen HTML 4 Doctype denn sonst?

Bei HTML 5 bin ich reingefallen, ja. <!DOCTYPE html>, ohne die externen w3.org DTDs. Aber ob jeder Browser die Framesets tatsächlich bis anno Picard unterstützen wird?

Server-Redirect, ja, klar. patsch

Ein iframe statt ein frameset wäre ein nicht missbilligtes HTML Element. Aber mein Vorschlag 3 sollte eigentlich der sein, der empfohlen ist: gar kein Frame.

Die feste body-Breite ist jedenfalls nicht das Problem, sondern die Frage, warum auf dem Smartphone die kleinere Schrift erscheint (also in einer min-width:700px Media Query berücksichtigt wird). Ich persönlich würde es ja für besser halten, einfach die Basis-Fontsize des Gerätes zu verwenden und sie nicht künstlich zu verkleinern, schon gar nicht abhängig von der Bildschirmbreite. Aber mal davon abgesehen: Ein Smartphone sollte im Hochformat eigentlich keine 700 CSS Pixel Bildschirmbreite haben, eher um die 400. Deswegen mein Verweis auf mydevice.io

Und wenn ich mir das HTML der Seite so durchblättere - da sind SO viele Macken drin, da ist eine Menge zu sanieren. <font> Elemente, <br> Haufen, wilde Nutzung von Heading-Elementen auch dort, wo gar keine Überschrift ist, Überschriften, die kein Heading-Element sind sondern ein Konstrukt aus font, u und b - Eddi muss dringend CSS lernen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

ich bin bisher immer davon ausgegangen, dass eine Frameset-Seite auch einen HTML Frameset-Doctype braucht, um valide zu sein.

Mag sein. Eine Frameset-Seite muss aber nicht unbedingt valide sein um dargestellt zu werden.

Wozu gibt's diesen HTML 4 Doctype denn sonst?

Um zwischen Quirks- und Standard- bzw. Almost-Standard-Modus umzuschalten. Was bei einem Frameset irrelevant sein sollte.

Aber ob jeder Browser die Framesets tatsächlich bis anno Picard unterstützen wird?

Warum sollte ein Browser die Unterstützung aufgeben und unzählige alte Seiten im Web nicht mehr darstellen? Oder auch neue.

Die feste body-Breite ist jedenfalls nicht das Problem,

Ich sehe das schon als problematisch an, wenn bei schmalem Viewport der Inhalt herausragt und horizontal hin- und hergescrollt werden muss.

sondern die Frage, warum auf dem Smartphone die kleinere Schrift erscheint

Fehlt da nicht ein „nicht“?

(also in einer min-width:700px Media Query berücksichtigt wird).

min-width:700px sind doch aber gerade die größeren Viewports.

Ich persönlich würde es ja für besser halten, einfach die Basis-Fontsize des Gerätes zu verwenden und sie nicht künstlich zu verkleinern

Ja.

schon gar nicht abhängig von der Bildschirmbreite.

Schriftgröße (und auch Zeilenabstand) abhängig von der Bildschirmbreite kann man schon machen: z.B. calc(0.8em + 1vw)

LLAP 🖖

[Rolf B]

Hallo Gunnar,

sondern die Frage, warum auf dem Smartphone die kleinere Schrift erscheint

Fehlt da nicht ein „nicht“?

Ich glaube nicht. Eddi schrieb:

Nicht so am Smartphone, da wird immer und direkt die kleine Größe von 60 % angezeigt.

Offenbar stimmt da was nicht mit der Anpassung an die device-width; ich habe jetzt mal remote debugging an mein Handy angeschlossen, und Remote Chrome sagt mir, die Seite sei 980 Pixel breit. mydevice.io sagt aber, es seien 360 CSS-Pixel.

Rolf

[Eddi]

Eddi lernt CSS, schon gut. Im oberen Teil habe ich schon ganz viel bzgl. Schriftgröße umgestellt auf em etc. Das muss erst mal stimmen, dann kommt der Rest weiter unten. Versprochen. Danke! Eddi

[Eddi]

Danke Dir!!

[Eddi]

Hallo, ich schaue mir das mal an, bin ein bisschen verwirrt. Mein Code, den ich nach www.xn--gttner-bua.de hochlade (das Unterverzeichnis wahlkreis149 habe ich mal gelöscht), enthält definitiv keinen frame-Befehl. Ich lade dahin hoch, weil ich unter www.wahlkreis149.de selbst keinen Webspace habe. Daher ist wahlkreis149.de umgeleitet auf www.xn--gttner-bua.de. So, wenn ich mir nun den Quelltext mittels Rechtsklick auf die Seite www.xn--gttner-bua.de anzeigen lasse, sehe ich MEINEN Code. Mache ich das Ganze bei www.wahlkreis149.de erhalte ich einige Zeilen, die tatsächlich frame etc. enthalten. Vermutlich kommt das von der Umleitung, von mir jedenfalls nicht. War mir bislang nicht bewusst. Eddi

[Matthias Apsel]

Hallo Eddi,

Daher ist wahlkreis149.de umgeleitet auf www.xn--gttner-bua.de.

Und da kommt auch der Frame her.

PS: Absätze gibts mit einer Leerzeile im Antworttext, Zeilenumbrüche mit zwei Leezeichen am Zeilenende.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Eddi

Daher ist wahlkreis149.de umgeleitet auf www.xn--gttner-bua.de.

Nein, das ist es eben nicht. Es sollte ein Umleitung eingerichtet werden – wie das geht, hatte ich bereits verlinkt –, das wurde aber nicht getan. Stattdessen ein Frameset, mit den bekannten Nachteilen, insb. dem Umgang mit URIs.

LLAP 🖖

[Eddi]

Hallo,

target="_blank" ist natürlich Quatsch. Entfernt. Und dass die Überschriften nach dem Anspringen verschwinden, muss ich noch lösen.

Also wenn ich die Seite, wie sie am PC angezeigt wird, auf dem Smartphone anzeige, ist die Schrift viel zu klein. Daher möchte ich bei einem kleinere Bildschirm, wie z. B. einem Smartphoen größere schrift. Das erhoffe ich mir nach wie vor von @media(min-width... Funktioniert ja auch am PC, nicht aber beim Smartphone. Um diese geht es mir, nicht um kleinere Bildschirme.

Wg. mydevice.io habe ich zwei Screenshots erstellt. SP2 SP1

Danke für deine Geduld und Freundlichkeit.

Eddi

[Rolf B]

Hallo Eddi,

so, jetzt hab ich's. Das frameset ist tatsächlich das Problem, bzw. der Mangel der meta viewport Angabe in der frameset Seite.

Und ich habe was gelernt: Chrome auf dem Smartphone kann man via USB Kabel mit Chrome auf dem Desktop debuggen. Bin nie auf die Idee gekommen, dass das gehen könnte. Jedenfalls weiß ich dadurch jetzt das folgende:

Der Body ist mit 980px Breite unterwegs. Ruf mal gättner.de auf dem Smartphone auf statt wahlkreis149.de - dann ist das frameset nicht dazwischen und die viewport-Angabe greift.

Ändere also bitte width:70em für den body auf max-width:70em. Danach kannst Du anfangen, für die Smartphone-Darstellung die Monsterfonts zu fixen 😀

Irgendwer muss doch für Dich wahlkreis149.de betreiben bzw. diese frame-Pseudoweiterleitung eingerichtet haben. Diese(r) jemand muss jetzt mithelfen und die meta viewport Angabe auch im frameset hinzufügen. ODER gleich die Frameset Seite durch einen Redirect nach gättner.de ersetzen. Danach kannst Du Dich dann an die Arbeit machen, um eine ordentliche Anzeige für das Smartphone hinzubekommen.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Diese(r) jemand muss jetzt mithelfen und die meta viewport Angabe auch im frameset hinzufügen.

Nein.

ODER gleich die Frameset Seite durch einen Redirect nach gättner.de ersetzen.

Ja. Ohne ODER, Wenn und Aber.

LLAP 🖖

[Eddi]

Hallo,

wow, ja, ich erkenne den Unterschied. Dann habe ich nun einiges an Arbeit.

Also meine Seite wird beim Provider umgeleitet.
redirect

Habe da jetzt aber auch mal nachgefragt wg. frameset etc.

Du bist klasse!

Danke!

Eddi

[Rolf B]

Hallo Eddi,

viel Spaß dabei. Und wenn Du schon dran bist:

• Mach Dir eine logische Gliederung deiner Inhalte
• Versorge diese Gliederung mit Heading-Elementen <h2>, <h3>, <h4> etc, je nach Gliederungstiefe. <h1> ist die Seitenüberschrift, die sollte es genau einmal geben
• Verwende semantische HTML Elemente, die mit HTML 5 eingeführt wurden. <header> und <footer> für Seitenkopf und -fuß, <main> für den Hauptteil. <section> für die Hauptabschnitte deiner Seite, <article> für die einzelnen Artikel. Jede section und jeder article sollten ein Heading-Element bekommen.
• Vermutlich ist es richtig, wenn deine Linkziele aus der .blackbox die h2 Überschriften werden.
• Elemente wie center und font verwendet man heute nicht mehr. Statt dessen gibt man den Bereichen, die man zentrieren oder mit Texteigenschaften versehen möchte, Klassen und setzt die gewünschten Eigenschaften via CSS
• Großbuchstaben macht man auch nicht von Hand. Ein sehbehinderter Nutzer mit Screenreader hört dann nicht "Politikblog", sonder "Peh Oh Ell Ieh Teh Ie Kah" usw. Verwende CSS (Beispiel in meinem Fiddle, siehe unten).
• Dein <center><div class="blackbox">...</div></center> möchte auch semantisch sein und ein <nav> Element werden.
• Statt mit position:fixed kannst Du auch mit Flexbox arbeiten. Grundkonstrukt:

<body>
<nav>
</nav>
<main>
</main>
</body>

Im CSS:

body { 
   display: flex; flex-direction:column;
   margin:0; padding: 0;
   height: 100vh;
   
}
nav {
   flex: 0 0 auto;
}
main {
   flex: 1 0 1em;
   overflow: scroll;
}

Ich habe da mal etwas mit JSFiddle gebastelt. Durch die Flexbox im Navigationsbereich wird ein Umbruch bei schmalen Viewports erreicht.

Guck mal, was Du davon brauchen kannst.

Rolf

[Eddi]

Ok, ich schaue mal. Danke!!

[Eddi]

Für alle, die das gleiche Problem haben: Umleitung mittels 301 ist möglich bei mir, aber dann ist das Ganze natürlich nicht versteckt. Und: Mein Vertrag besitzt keine feste IP. Heißt: Ich muss mit dem "nicht versteckt" leben oder den Vertrag ändern.

[Matthias Apsel]

Hallo Eddi,

wahlkreis149.de scheint mir eine Domain zu sein, für die man 2-3 Euro monatlich für eigenen Webspace investieren sollte.

Bis demnächst
Matthias

[Eddi]

Ja, das ist wohl wahr.

[Eddi]

Ich habe mir mal die Empfehlungen zu Schriftgrößen angesehen, wo ja "em" empfohlen wird. Ich finde es nur hinderlich, dass die Sprünge zwischen den Größen so gewaltig sind, man also keine Zwischengrößen hat.

[Matthias Apsel]

Hallo Eddi,

Ich habe mir mal die Empfehlungen zu Schriftgrößen angesehen, wo ja "em" empfohlen wird. Ich finde es nur hinderlich, dass die Sprünge zwischen den Größen so gewaltig sind, man also keine Zwischengrößen hat.

Für em darf man auch Dezimalzahlen angeben.

Bis demnächst
Matthias