Problem mit Media Queries auf Handy

[Pudiii]

Hi Leute,

ich habe bei meinem aktuellen Projekt Media Queries benutzt, die bei bestimmten Viewportgrößen die CSS-Eigenschaften ändern sollen und das funktioniert am PC auch einwandfrei.

Jedoch kriege ich es gerade auf mobilen Geräten - wofür ich es aj eigentlich vorgesehen habe - nicht zum laufen.

Hier die Website:
Und die CSS-Datei:
(die Media Queries sind ganz unten in der CSS-Datei)

Hoffentlich könnt Ihr mir helfen -
vielen Dank schon mal im Voraus!

P.S.: Ich hätte da noch ein weiteres Problemchen, für das ich mal einen neuen Thread gemacht habe:
http://www.html.de/threads/website-bei-aktivem-media-query-nicht-mehr-zentriert.51667/

 

[Tronjer]

Warum setzt du kein Framework ein?

 

[Pudiii]

Hmmm .. hatte Boilerplates und Frameworks bis jetzt noch nicht so richtig auf dem Schirm, bzw. habe ich mich noch nicht so richtig damit auseinander gesetzt um ehrlich zu sein.

Aber müsste doch auch möglich sein, die Media Queries für dieses Projekt noch per Hand auf mobilen Geräten zum Laufen zu kriegen, oder? ^_^

 

[Tronjer]

Zumindest html5shim solltest du aber schon der alten IEs wegen einbinden.

Natürlich kann man auch alles manuell machen. Allerdings ist das aufwändiger, zumal man bei responsive Design auch in Prozentwerten und Grids denken sollte. Chrome bietet übrigens auch die Möglichkeit, den User Agent auf mobile Geräte umzustellen.

 

[Cheffchen]

Hallo,

du bist gut.
füge mal das ins head ein, sonst macht das kein sin :O)

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

Cheffchen

 

[Tronjer]

maximum-scale=1?

 

[Marv]

Hi,

maximum-scale=1 verhindert, dass der User zoomen kann.

Ich empfehle dir auch einmal Front-end Frameworks wie Bootstrap oder Zurb Foundation anzugucken. Auch wenn du sie nicht komplett verwenden willst, lohnt sich doch mal ein Blick in den Code, da kannst du dir viele nützliche Sachen abgucken.

 

[Tronjer]

Hi,

maximum-scale=1 verhindert, dass der User zoomen kann.

Ich weiß. Deshalb sollte man schon gute Gründe haben, um dem User das Scrollen zu verbieten.

 

[Pudiii]

<meta name="viewport" content="width=device-width">

Genau danach hab ich gesucht, vielen Dank! Wird jetzt so angezeigt wie ich mir das vorgestellt habe.
Ob ich jetzt maximum-scale=1 weg lasse oder nicht, macht in diesem Fall bei mir gar keinen Unterschied .. Ich kann da jetzt auch nicht mehr oder weniger zoomen ô.0

Naja wie dem auch sei, ich werde mich für mein nächstes Projekt auch mit Frameworks/Boilerplates beschäftigen - versprochen!
Danke für die Empfehlungen und Tipps!

 

[Cheffchen]

Bitte schön.
Es kann manchmal so einfach sein (^_-)

Cheffchen