CSS-Befehl für responsives Webdesign funktioniert mal ja mal nein - Warum?

Hallo,

was kann der Grund dafür sein, dass mein CSS-Befehl für eine responsive Darstellung zwar von Tools wie "Responsinator", den Webentwickler-Tools in Chrome und beim "Browser-Fenster verkleinern" erkannt werden, wenn ich die Website aber mit meinem Smartphone teste, das Google-Tool zum checken responsiver Webseiten verwende oder in den Chrome Webentwickler-Tools auf "iPhone" oder jedes beliebig andere mobile Gerät umstelle, nicht funktioniert.

Also bedeutet, der Befehl funktioniert aber mobile Geräte können ihn nicht verarbeiten. Warum? Sowas hatte ich noch nie. Ich verzweifel

Hier mein Code:

/* Tablet Layout: 768px */ @media only screen and (min-width: 768px) and (max-width: 960px) { .content p { font-size:16px; } }

Lösche den Beitrag von mir aus auch wieder. Brauche nur dringend eine Antwort auf meine Frage. Wusste nicht dass in diesem Forum nur Fragen gestellt werden dürfen, die nicht auf auf der Website http://www.traum-projekt.com/forum/ zu sehen sind. Sorry. Weißt du dennoch eine Antwort auf meine Frage? Dann schreibe ich in Zukunft auch gerne nur noch im Forum von Traumprojekt, sorry nochmals..

Ja schon gut, ich habe es doch kapiert. ES TUT MIR LEID!! Hätte ich gewusst, dass man eine Frage nicht in zwei unabhängigen Foren stellen darf (die Frage extra nicht mit Copy&Paste erstellt), dann hätte ich es auch nicht gemacht. Und nein, die Forenregeln habe ich akzeptiert aber nicht gelesen. Wie 99% der anderen auch. Dafür entschuldige ich mich nochmal bei Gastl, dem eifrigen Foren-Admin. Wäre super, wenn wir das Offtopic an der Stelle beenden können, denn mein Problem besteht noch immer und ich weiß nicht wieso die CSS-Befehle von Tools und dem Browser bei Verkleinern des Fensters ausgelesen werden aber von mobilen Geräte nicht

Hallo MrMurphy,

Danke für deine Antwort. Link kann ich Dienstag posten, wenn ich die CSS-Datei wieder hochlade. Trotz allem dann die Frage theoretisch. Wie kann es sein, dass ein Browser beim Verkleinern der Bildschirmgröße sowie Tools wie Responsinator die CSS-Befehle zum responsive erkennen, die Smartphones aber nicht? Übrigens zwecks dem Thema Pixel: Darum geht es leider in meiner Frage nicht. Jedmöglicher CSS-Befehl wie im Beispiel ist davon betroffen:

@media only screen and (min-width: 768px) and (max-width: 960px) { .content p { color:red; } }

Hallo McMurphy,

vielen Dank für Deine Antwort.
Jetzt versteh ich auch was du mit den Pixeln meintest. Ich bin von der Schriftgröße ausgegangen. Danke für das Aufklären und die weiterführenden Erläuterungen.

Zitat

Die Smartphones erkennen die Befehle doch. Du erkennst nur nicht, das die Smartphones sie erkennen.

Wie ich schon geschrieben habe sind in Zeiten von Retina-Displays und ähnlichen Pixel nicht mehr Pixel.

Was meinst du mit dem ersten Satz? Also wenn mein Smartphone (ohne Retina-Display) den CSS-Befehl deiner Aussage nach erkennt, warum weigert es sich dann die Schriftfarbe in Rot dazurstellen (laut Beispiel)?

Zitat

Vielleicht kommst du dahinter, wenn du mal mit unterschiedlichen Pixel-Angaben rumspielst.

Alles gemacht. Ändere ich die Breakpoints, werden die geänderten Breakpoints auch vom Browser erkannt. Die Smartphones und das Google-Tool aber ignoriert alles. Da ändert es auch nix daran, ob der Breakpoint bei 768px oder 799px gesetzt wurde. Habe noch weitaus mehr probiert. Auch bei 7 anderen Webseiten testweise den CSS-Code eingesetzt - immer erkennen auch die Smartphones den Code. Das Google-Tool auch. Nur eben bei dieser einen Website nicht

Zitat

Außerdem sollten bei MediaQueries genaue Eingrenzungen vermieden werden. Also entweder mit Mobile-First oder Desktop-First beginnen und dann pro MediaQuery nur noch einen Wert angeben.

Danke für den Hinweis.

Zitat

Also nur entweder max-width oder min-width, niemals nicht beide zusammen. Das hilft häufig auch um das eigene Verstehen zu verbessern.

Ob man mit Mobile-First oder Desktop-First anfängt ist technisch vollkommen egal. Für Anfänger wird häufig Mobile-First empfohlen, da es gedanklich einfacher zu händeln ist.

Mobile-First = die min-width-Angaben verwenden? Also:

• usw.
• @media only screen and (min-width: 1100px) { mache was }
• @media only screen and (min-width: 960px) { mache was }
• @media only screen and (min-width: 768px) { mache was }
• usw.

Verstehe ich das so richtig?

- - - Aktualisiert - - -

P.S. Und anstatt im Media Query px lieber em oder % verwenden? Richtig?

Zitat

Es weigert sich ja nicht. Wenn du den width-Wert zwischen 768px und 960px eingrenzt, dein Smartphone aber (nur mal Beispielwerte) hochkannt 650px anzeigt und im Querformat 1050px kann es deine Angaben schlicht nicht anzeigen. Deshalb solltest du ja mal rumspielen (am besten kräftig), den unteren Wert zum Beispiel auf 400px ändern und dir dann das Ergebnis anschauen.

Danke für deine Erläuterungen. Das Problem ja aber ist, dass der CSS-Code eben nicht ausgeführt wird, selbst wenn ich mich in dem Bereich befinde. Das Tool Responsinator bietet ja die Anzeige unterschiedlicher Bildschirmgrößen. Mein Browser-Fenster groß und klein schieben springt auch in diesen Bereich und färbt mit die Schrift rot. Und wenn ich die Chrome Developer Tools verwende, dann kann ich auch alle beliebigen Bildschirmbreiten "simulieren". Und Geräte. Simuliere ich die Breite, zum Beispiel, 800px zeigen mir die Developer Tools die Schrift in rot. Stell ich dann auf iPhone 6 um - CSS-Code wird ignoriert. Der CSS-Code aber muss funktionieren, da ich ihn auf einigen anderen Webseiten eingesetzt habe. Testweise. Funktioniert.

Kann es sein, dass die betroffene Webseite "irgendetwas" einsetzt, dass das Auslesen der aktualisierten CSS-Datei blockiert. Oder Mobilgeräten den Zugriff nicht erlaubt? Das lässt sich ja von einer Website abfragen, ob der Zugriff von einem Desktop-PC oder einem mobilen Gerät heraus erfolgt. Könnte das das Problem sein, bzw. denk ich in die richtige Richtung?