Media Queries werden nicht richtig genutzt

Waegi · 23.03.2014

Hallo,

Ich habe aktuell ein Problem und zwar habe ich eine Website gemacht, diese ganz normal designed und gecoded, auch mit Media Queries um das alles für Handys usw. vereinfacht darzustellen. Das hat alles soweit funktioniert, die Umbrüche und so weiter funktionieren alle wunderbar.

Jetzt hab ich dann das komplette Design auf Wordpress umgesetzt und auf einmal funktionieren die Media Queries nicht mehr richtig, heißt es wird mir immer die Desktop-Ansicht angezeigt und es passt sich nicht auf die Größe an. Ich hab das Ganze über den einen Resizer der eine Javascriptfunktion aufruft getestet und da funktioniert nur die Website, die ohne Wordpress läuft.

Ich hab hier euch mal die zwei Websites:
Die ohne Wordpress, nur HTML, CSS und en bissle Javascript:
Die die über Wordpress läuft:

Ich hoffe mir kann dabei jemand helfen.

Grüße Waegi

cebito · 23.03.2014

Bei mir funktionierts. Leere mal deinen cache...

Waegi · 23.03.2014

Ah wunderbar, Dankeschön für die Hilfe funktioniert wieder alles.

Waegi · 28.04.2014

Hallo,

Ich melde mich jetzt nochmals, das ganze funktioniert jetzt auf dem Computer einwandfrei, wenn ich meinen Browsercache einmal geleert hab und mein Browserfenster dann verkleiner. Jedoch hab ich jetzt das Problem, wenn ich von meinem iPhone aus auf die Website zugreife, dann wird mir die Desktop-Version angezeigt, hat jemand eine Idee woran das liegen kann?

Links dazu sind immer noch die gleichen.

mfg Waegi

afr0kalypse · 30.04.2014

Probier mal anstatt width den parameter device-width.
i-geräte haben ja durch den retina display ganz andere auflösungen / pixeldichte.

Waegi · 01.05.2014

Nop, bringt leider auch nichts, jetzt funktionierts nicht mal mehr aufem PC.

afr0kalypse · 02.05.2014

Deine media queries überschreiben sich gegenseitig.
schau mal hier: http://css-tricks.com/logic-in-media-queries/

Waegi · 02.05.2014

Okay, aber warum hab ich dann nur das Problem in meinem Wordpresssystem und nicht wenn ich die Website so teste, also den Code den ich am Anfang geschrieben hab. Auch hab ich das schonmal so gelöst bei einer Website, hier zu sehen:

Und zum Vergleich, hier geht es:
Hier nicht:
Wobei sich bei den beiden Websites nur die Aufteilung des Codes für Wordpress verändert hat und die CSS fast komplett gleich geblieben ist, bis auf ein paar kleine Anpassungen, trotzdem seh ich auf dem Handy nur die Computeranzeige.

Gruß Waegi

afr0kalypse · 02.05.2014

hi waegi.
sorry das mit dem überschreiben ist nur halb richtig.
Bei mir auf dem Handy wird in beiden Websites eine mobile Version angezeigt.
Trage doch mal noch einen Viewport mit ein.

Waegi · 02.05.2014

Wie genau geht denn das mit dem Viewport, hab das bisher noch nicht gebraucht und deshalb bin ich damit noch nie in Verbindung gekommen.

Edit: Also auf meinem iPad(1.Generation) geht es mit den MediaQueries, nur nicht am iPhone (5S), das ist komisch.

Gruß Waegi

Waegi · 08.05.2014

Hat denn noch jemand ne Idee!

Waegi · 17.05.2014

Für alle die auch daran interessiert sind, wie es letztendlich auch geklappt hat, hier der entsprechende Code-Schnipsel, den ich im <head> Bereich eingfügt habe:

Code:

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