Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 12

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

  1. #1
    HTML Newbie
    Registriert seit
    02.04.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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:
    HTML-Code:
    /* Tablet Layout: 768px */ @media only screen and (min-width: 768px) and (max-width: 960px) { .content p { font-size:16px; } }
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.153
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

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

    Crossposting
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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 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..

  4. #4
    König(in)
    Registriert seit
    13.06.2012
    Beiträge
    1.153
    Danke
    14
    Bekam 63 mal "Danke" in 61 Postings

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

    Blöde Ausrede. Du hast dich heute hier angemeldet und die Forenregeln akzeptiert.
    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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

  6. #6
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

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

    Hallo,

    ohne Link zur Seite wird dir das kaum jemand beantworten können. Quellcodeschnipsel sagen erfahrungsgemäß gar nichts aus.

    Da eine Beispielseite bei mir funktioniert liegt es wahrscheinlich an deinem fehlenden Grundlagenwissen. Pixel auf einem Desktop-Monitor sind heutzutage nicht mit einem Smartphone-/Tablet-Screen gleichzusetzen.

    Gruss

    MrMurphy
    Geändert von MrMurphy (03.04.2015 um 09:19 Uhr)

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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; } }

  8. #8
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

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

    Hallo

    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?
    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.

    Übrigens zwecks dem Thema Pixel: Darum geht es leider in meiner Frage nicht.
    Na sicher geht es darum. Es ist schon seltsam, wenn du eine CSS Angabe mit zwei Pixel-Werten postest

    Code:
    @media only screen and (min-width: 768px) and (max-width: 960px) { .content p { color:red; } }
    und anschließend behauptest, das Pixel mit deinem vermeintlichen Problem nichts zu tun haben. Wobei es sachlich wie schon geschrieben überhaupt kein Problem gibt. Du bist offensichtlich mit den aktuellen Displaytechniken und deren Auswirkung auf das HTML / CSS überfordert.

    Vielleicht kommst du dahinter, wenn du mal mit unterschiedlichen Pixel-Angaben rumspielst. 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. 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.

    Gruss

    MrMurphy
    Geändert von MrMurphy (03.04.2015 um 15:40 Uhr)

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2015
    Beiträge
    6
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

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

    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.

    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)?

    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

    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.

    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?

  10. #10
    Großmeister(in)
    Registriert seit
    04.08.2009
    Beiträge
    574
    Danke
    0
    Bekam 67 mal "Danke" in 65 Postings

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

    Hallo

    Was meinst du mit dem ersten Satz?
    Du siehst nur die Endzustände. Bei denen greifen deine Angaben aber nicht. Wenn sich die Ansichten nicht schlagartig ändern würden, sondern du den Übergang sehen könntest, würdest du erkennen, das die MediaQueries zwischenzeitlich aktiv werden und dann wieder inaktiv. Genau so, wie du es angegeben hast.

    Also wenn mein Smartphone (ohne Retina-Display) den CSS-Befehl deiner Aussage nach erkennt, warum weigert es sich dann die Schriftfarbe in Rot dazurstellen
    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.

    Da Pixel heutzutage nicht gleich Pixel sind solltest du dabei nicht von den Pixel-Angaben deines Smartphoneherstellers ausgehen.

    Womit wir beim nächsten Problemfeld sind:

    768px und 960px
    Lass die Finger davon. Das sind vollkommen unnütze Werte, auf die sich Webseitenersteller berufen, die mit den aktuellen Techniken überfordert sind.

    Merksatz: Im Web gibt es keine festen Größen.

    Beim Erstellen von Webseiten wird zunächst der HTML-Inhalt erstellt, ohne jegliches weitere CSS-Layout. Dabei werden nur der Text, die Bilder und was es sonst noch so gibt in geeignete Elemente gepackt, also p, h1 bis h6, ul, li, figure und so weiter. Dabei sollten natürlich Grundsätze wie "Text ist Text und kein Bild" und ähnliche beachtet werden. Also das Grundlagenwissen.

    Container wie header, nav, main, footer, article, aside, section und div werden nur dort eingefügt, wo sie erforderlich sind.

    Anschließend werden die Container (und nur die) für das Grundlayout gesetzt.

    Jetzt sollte die Seite bei jeder Fenstergröße und mit jedem Gerät problemlos angezeigt werden. Zwar schmucklos, aber sinnvoll, sehr flexibel und gut lesbar.

    Danach werden per CSS erst mal die Grundeinstellungen (Normalisierung, Reset) gesetzt. Die haben mit dem Layout erst mal noch nichts zu tun.

    Jetzt geht es erst mit dem CSS-Layout los. Bei Mobile-First schaut man sich die Seite bei einer schmalen Fensterbreite an und erstellt dafür das Layout unter "@media all"

    Wenn dort alles wie gewünscht angezeigt wird zieht man das Fenster breiter und schaut, aber welcher Breite Änderungen im Layout sinnvoll sind. Die werden dann in ein geeignetes MediaQuery eingetragen, z. B. "@media only screen and (min-width: 580px)"

    Das wiederholt man dann bis die maximale Fensterbreite erreicht ist. Dabei ist auch die Reihenfolge im CSS-Quelltext entscheidend, bei Mobile-First kommen erst die kleinen Werte und dann die Größeren. Also genau umgekehrt wie in deinem Beispiel.

    Dabei sollte man drei bis vier, höchstens fünf Breakpunkte setzen.

    Das nennt sich dann "Das Layout dem Inhalt anpassen" und nicht den Endgeräten.

    Das Hauptproblem dabei ist, das überforderte Seitenersteller beim Eingeben des HTML-Quellcodes immer schon das gewünschte Endlayout im Sinn haben und sich davon nicht lösen können. Das hat mit aktuellem HTML/CSS aber nichts zu tun.

    Und anstatt im Media Query px lieber em oder % verwenden? Richtig?
    Nicht so ganz. Pixel sind schon ok, em oder rem gehen auch, % sollte nicht verwendet werden.

    Gruss

    MrMurphy
    Geändert von MrMurphy (06.04.2015 um 11:31 Uhr)

Ähnliche Themen

  1. Post Befehl funktioniert nicht
    Von Unregistriert im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 25.07.2012, 16:51
  2. Befehl wird missachtet, aber warum?
    Von Organic700 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 04.02.2010, 21:03
  3. marquee befehl funktioniert nicht
    Von suschi im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 21.03.2007, 23:58
  4. Warum funktioniert das nicht?
    Von Referend im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 18.08.2005, 01:24
  5. warum funktioniert das phpKit bei mir nicht?
    Von bestdani im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 07.07.2005, 15:45

Stichworte

Berechtigungen

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