Bootstrap 2.3 @media werkt niet op mobile.

[CrashKonijn]

Goede avond allemaal!

Op dit moment ben ik bezig met een website, ik heb eerst het design gemaakt in photoshop en vervolgens werkend gemaakt met bootstrap 2.3 (Mijn eigen CMS kan atm alleen hier mee overweg). Anyway, hij werkte volledig responsive (in hoeverre dat nodig is met deze simpele layout), zowel op desktop als verschillende mobile telefoons en browsers.

Nou heb ik gister ochtend de template met exact dezelfde bootstrap versie ed in mijn CMS gegooid, en de site werkt ook nog naar functioneren in elke willekeurige browser op pc, echter als ik hem open op een mobile browser (ik heb verschillende android telefoons getest), dan leek het net alsof @media maar half werkt. Mijn text blok wordt wel op normale grote weergeven, maar de nav en de footer blijven wel op normale grote.

Na veel geprobeerd te hebben heb ik net via chrome de mobile dev tools aan de praat gekregen, en als ik de originele template open zie je ook dat hij hem netjes naar 320px schaalt, zodat hij er goed uitziet op mobile. (en je ziet ook dat hij @media uitvoerd)
http://develop.pklooster.nl/aircoservicedrenthe


Als ik echter de huidige versie open dan zie je dat de body gewoon nog op de originele grote, en voerd hij de @media helemaal niet uit.
http://aircoservicedrenthe.nl


Persoonlijk heb ik alle ideeen die ik had (inclusief 2 dagen googlen) uitgeprobeerd en ben dus een beetje het einde raad. Ik hoop dat iemand van jullie me op ideeen kan helpen om dit probleem op te lossen.

Met vriendelijke groet,

Peter Klooster

[Zoefff]

Je vergeet de viewport width te zetten. De max-width @media rules worden dus helemaal genegeerd. Voeg iets als onderstaande toe aan je head om dit op te lossen

HTML:

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

[CrashKonijn]

Dat werkt inderdaad, weer wat geleerd

Wel raar dat het op normale browsers wel gewoon werkt...

In iedergeval ontzettend bedankt!

[BramVroy]

Is niet zo gek. Mobiele apparaten proberen al snel de optimale breedte van een website te gokken, en passen hun viewport daar virtueel aan aan. Met width=device-width voorkom je dat.