opgelost Device pakt juiste css, resized browser niet

Gisteren postte ik een site op dit en een ander forum om te zien wat de bezoekers van de site zouden vinden. 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 een aantal 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:

Code:


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:

Code:

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 .

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

Ik werk altijd met kleinere mediaqueries zoals: En dat werkt altijd perfect. Ik gok eigenlijk dat je ergens ook nog iets met de devices doet en niet alleen met de schermgrootte.

De media querie was ook iets kleiner trouwens, was regel weggevallen:

Eigenlijk werkt dit ook perfect, alleen niet in de browser.

Ik gok eigenlijk dat je ergens ook nog iets met de devices doet en niet alleen met de schermgrootte

Ik heb geen plugins o.i.d. voor mobiele weergave en ook in de index.php van mijn template staan geen device-specifieke zaken.

Ik bedoel dat ik werk met en jij met Heb me er niet in verdiept verder, maar dat zou het verschil kunnen verklaren.

Merk geen verschil helaas.

Wat ik me nog bedacht: gebruik jij ook media queries voor jouw basis desktop-weergave? Oftewel: staat al jouw css tussen media queries?

Stom dat ik daar niet eerder aan hebt gedacht. Moet haast wel de oplossing zijn.

Astrid schreef : Ik bedoel dat ik werk met

Code:

min-width

en jij met

Code:

min-device-width

Heb me er niet in verdiept verder, maar dat zou het verschil kunnen verklaren.

Het lijkt erop dat dit + meer gebruik van media queries (dus ook desktop en daar had ik niet aan gedacht) de oplossing is!

Ik test nog wat verder en laat het definitief weten.

gebruik jij ook media queries voor jouw basis desktop-weergave?

Nee. Lijkt me ook niet zinvol. Of je moet echt iets aan willen passen voor kleine beeldschermen, maar dan zit je toch al gauw op tabletgrootte volgens mij.

Na een paar dagen testen: de ene helft van de oplossing is om niet 'device-width' in de media queries te plaatsen, maar 'width', waardoor de browser de css ook pakte (het device deed dat al wel). Daarnaast moest ik nog specifiekere media queries gebruiken om de diverse formaten te bedienen.

Astrid, hartelijk dank voor de hulp!