Device pakt juiste css, resized browser niet

Gisteren postte ik een site in de Joomla Showcase op dit en een ander forum. De eerste feedback van beide platformen was hetzelfde: de responsive kant van de site kan beter.

Ik schrok daar een beetje van, omdat ik alle beschikbare apparaten (en dat zijn er nogal wat) in alle standen de website over het algemeen aardig tot prima laten zien.

Ik werd doorverwezen naar allerlei responsive-testsites, maar daar liep ik al gauw tegen een issue aan waar ik al langer mee worstel: als ik mijn browser (FF) resize, dan past de vormgeving zich wel aan, maar hij pakt niet alle in de css gedefinieerde media queries.

Het gaat om een site die ik even als demo hier heb geparkeerd. Alle css-bestanden zijn voor de browser toegankelijk en in de index.php van mijn template staat dit:


Voorbeeld1
Als je nu een hoek van het scherm pakt en je wijzigt het formaat, dan past de vormgeving zich wel aan bij de grootte van het scherm. Pak je een hoek en je maakt het scherm zo smal mogelijk, dan floept ie naar de mobiele weergave (portrait).

Prima, maar dat is eigenlijk de enige grootte die ik kan testen.

Voorbeeld2
Stel, in mijn css zet ik het volgende:

De website zou nu verborgen moeten zijn voor een ipad in portrait-stand. En dat klopt, mijn ipad laat een wit scherm zien. Zet ik mijn browser echter op ipad-portrait-grootte (768x1024), dan laat ie de website doodleuk zien.

Het is erg vervelend, want ik kan de site zo niet goed testen. En ik krijg vervelende, negatieve feedback ::thumbsup:: .

Ik zie vermoedelijk iets kleins over het hoofd. Heeft iemand een suggestie? Dank!

Basman;118046 schreef : Zet ik mijn browser echter op ipad-portrait-grootte (768x1024), dan laat ie de website doodleuk zien.

Heeft de browser nu die afmeting of het venster?

Dus je topic kan op "Opgelost" gezet worden?