Ergebnis 1 bis 5 von 5

Smartphone ignoriert CSS

  1. #1 Zitieren
    Veteran
    Registriert seit
    Jun 2012
    Beiträge
    629
    Ich gestalte eine Website und mache das CSS-File direkt fürs Smartphone optimiert.
    Also nicht "Farbe: Grün", aber Media Query, wenn Max-Width: 1000px, dann "Farbe: Blau", oder so,
    sondern ich schreibe direkt, ohne Media Query in mein CSS wie die Seite aussehen soll auf dem Smartphone.
    Z.B.
    "header{
    text-align: center;
    color: black;
    }"
    also jede Zeile soll auf dem Smartphone in der Mitte des Bildschirms plaziert werden und die Schriftfarbe soll schwarz sein.

    Diese vöööllig simple Seite rufe ich mit dem Smartphone auf und es zeigt allen Ernstes den Text nach links gerückt an und die Schriftfarbe in weiß!

    Wie kann das sein?
    Im Browser am PC übrigens wird alles korrekt angezeigt.
    Mein Smartphone scheint einfach die CSS-File (teilweise) zu ignorieren!

    und ja, ich habe das schon zig fach gegooglet und auch in der index.html stehen
    "<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">"
    Gothicforum ist offline

  2. #2 Zitieren
    Legende Avatar von jabu
    Registriert seit
    Jul 2011
    Beiträge
    7.328
    Mit so wenig Information müssen wir wohl raten, woran es liegen könnte. Also rate ich mal:

    Hast du...
    ...denn den Browsercache geleert?
    ...vllt. nicht die Rechnung mit der Fehlertoleranz einiger Browser gemacht (sodass eigentlich der Browser, auf dem es läuft, falsch liegt (kann an Kleinigkeiten liegen))? -> Im Zweifel Validatoren für HTML und CSS nutzen.

    Edit: Ich habe das andere entfernt, da ich für einen Moment nicht aufgepasst habe (Mit dem anderen Browser geht es doch, jabu wird alt und schusselig.).

    Edit#2: Aber irgendwie könnte es trotzdem sein, dass der Fehler sich so auswirkt, dass in dem einen Fall ein Attribut (Farbe Weiß) eines Elementes (z.B. p) global gesetzt ist, in dem anderen aber nicht, weswegen das trotzdem (indirekt, wäre allerdings herauszufinden, wo das passiert) passen könnte:
    Spoiler:(zum lesen bitte Text markieren)

    Da du anscheinend bereits irgendwo deinem Text Attribute verpasst hast (sonst wäre er wohl schwarz), könnte es sein, dass diese nicht überschrieben werden. Ein einfaches Beispiel:

    Nehmen wir mal dieses HTML an:
    Code:
    <!DOCTYPE html>
    <html lang="de">
    <head>
    <meta charset="utf-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <header>
    <p>Blabalbala</p>
    </header>
    <!-- weitere Inhalte -->
    </body>
    </html>

    Dann könnte dein CSS z.B. so aussehen:
    Code:
    p {
        text-align: left;
        color: white;
    }
    header {
        background-color: green;
        color: black;
        text-align: center;
    }
    header kann hier nicht überschreiben, was für p festgelegt ist, da sich p innerhalb von header befindet und überschreibt, was in header festgelegt ist (etwas simplifiziert, aber im Endeffekt läuft es darauf hinaus).

    Anstelle von p und header kommen auch andere Elemente infrage (müsstest du gucken, was es bei dir ist). Das Problem ist also grundsätzlicher Natur. Besser formatiert man (nach Möglichkeit mit div-Containern (wäre flexibler)) in Verbindung mit class oder id.

    Eine etwas faule Lösung (weil sie zum Beispiel passt):
    Code:
    p {
        text-align: left;
        color: white;   
    }
    header {
        background-color: green;
    }
    header p {
        color: black;
        text-align: center;
    }

    Hiermit hätte sich das Problem erst gar nicht gestellt:
    Code:
    body {
        text-align: left;
        color: white;   
    }
    header {
        background-color: green;
        color: black;
        text-align: center;
    }
    Warum? Weil header sich innerhalb von body befindet und daher die Attribute, die in body festgelegt sind, überschreibt. Dafür ist diese Variante fehleranfällig, für den Fall, dass du Elemente global spezifizierst, wie eben z.B. p (der alte Fehler), was sogar ein Nachteil gegenüber der vorgenannten ist.

    Also kombinieren wir:
    Code:
    body {
        text-align: left;
        color: white;   
    }
    header {
        background-color: green;
    }
    header p {
        color: black;
        text-align: center;
    }
    p {
        text-align: right;
        color: yellow;    
    }
    Wie man sieht, werden die Attribute von p nun innerhalb von header überschrieben. Der Text innerhalb von <p></p> ist nur außerhalb gelb und rechtsbündig ausgerichtet. Man kann also mit Selektoren auch die Schachtelung abbilden. Aber diese Lösungen sind nicht zum Nachahmen gedacht. class sowie id sind viel flexibler und robuster und daher normalerweise vorzuziehen.

    Edit#3:

    Übertragen auf dein Problem wäre also herauszufinden, wo ein Element global manipuliert wird (z.B. p) - und zwar vermutlich fehlerhaft, sodass es einmal abgekauft wird und einmal nicht.

    Puh. Das war aber ganz schön im Nebel herumgestochert. Edit#4: Blue Force spricht wahr, denn wenn irgendwo an der Struktur was kaputt ist, dann kann man lange vergeblich stochern (kaputte Struktur ist naheliegend, weil Undefiniertes unterschiedliche Folgen haben kann (falls nicht von HTML5 ausgegangen wird, könnte das schon passen, weswegen er wohl doctype erwähnt, guter Punkt))...
    jabu ist offline Geändert von jabu (25.03.2019 um 20:51 Uhr)

  3. #3 Zitieren
    Retro Micky Avatar von Blue Force
    Registriert seit
    May 2009
    Beiträge
    26.192
    Benutze diese HTML-Struktur:
    Spoiler:(zum lesen bitte Text markieren)
    Code:
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Pruebas</title>
        <meta name="viewport" content="width=device-width; initial-scale=1.0;">
        <link rel="stylesheet" href="styleslocation/style.css">
    
    </head>
    <body>
    
        <!--Content here-->
    
    
    </body>
    </html>
    Insbesondere den doctype angeben!

    und wenn du es doch mit media query versuchen willst, dann nicht
    @import "css/style.css";
    sondern
    @import url("css/style.css");
    Blue Force ist offline

  4. #4 Zitieren
    Veteran
    Registriert seit
    Jun 2012
    Beiträge
    629
    Ich weiß gar nicht, wie ich den Cache leere auf meinem Smartphone.
    Ich kann keine derartige Option finden, weder im Browsermenü, noch in "Einstellungen" vom Smartphone.
    Es ist ein Samsung Galaxy J6. Wie macht man denn das?
    Gothicforum ist offline

  5. #5 Zitieren
    Legende Avatar von jabu
    Registriert seit
    Jul 2011
    Beiträge
    7.328
    Zitat Zitat von Gothicforum Beitrag anzeigen
    Ich weiß gar nicht, wie ich den Cache leere auf meinem Smartphone.
    Ich kann keine derartige Option finden, weder im Browsermenü, noch in "Einstellungen" vom Smartphone.
    Es ist ein Samsung Galaxy J6. Wie macht man denn das?
    Google hilft doch:
    smartphone browser cache leeren
    (Zwischenspeicher der App löschen, falls die App selbst kein Leeren des Caches anbietet)

    Dass du jetzt noch fragst, könnte u.U. darauf hindeuten, dass es nicht daran liegt (was natürlich kein Ausschlussgrund ist).
    jabu ist offline

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •