Skip to main content

Welkom bij Joomla!NL

Om alle mogelijkheden van dit forum te kunnen gebruiken, moet je je eerst registreren.

Vermeld in iedere vraag duidelijk:
  1. De versie van Joomla! 3.X die je gebruikt
  2. De volledige url van je website indien mogelijk.
  3. De versie van de extensie waar de vraag over gaat.

opgelost Device pakt juiste css, resized browser niet

Device pakt juiste css, resized browser niet

20 jan 2015 12:19
#1
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:
Code:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />


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:
Code:
@media only screen and (min-device-width : 768px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { body { display:none;} }

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 :P .

Ik zie vermoedelijk iets kleins over het hoofd. Heeft iemand een suggestie? Dank!
Gemarkeerd als webneus door: Astrid
  • Sebas
  • Sebas's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 29

Device pakt juiste css, resized browser niet

20 jan 2015 12:26 - 20 jan 2015 12:27
#2
Ik werk altijd met kleinere mediaqueries zoals:
Code:
@media (min-width: 960px) and (max-width: 1100px) {
En dat werkt altijd perfect. Ik gok eigenlijk dat je ergens ook nog iets met de devices doet en niet alleen met de schermgrootte.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37456

Device pakt juiste css, resized browser niet

20 jan 2015 12:51
#3
De media querie was ook iets kleiner trouwens, was regel weggevallen:
Code:
@media screen and (min-device-width : 768px) [color=#ff0000] and (max-device-width : 1024px) [/color] and (orientation : portrait)

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.
  • Sebas
  • Sebas's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 29

Device pakt juiste css, resized browser niet

20 jan 2015 12:55
#4
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.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37456

Device pakt juiste css, resized browser niet

20 jan 2015 13:06
#5
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.
  • Sebas
  • Sebas's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 29

Device pakt juiste css, resized browser niet

20 jan 2015 14:40
#6

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.
  • Sebas
  • Sebas's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 29

Device pakt juiste css, resized browser niet

20 jan 2015 16:20
#7

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.
Groetjes, Astrid
Gebruik de zoekfunctie van dit forum voordat je een nieuwe vraag plaatst.
Vragen uitsluitend via dit forum.
yndi.nl - kvk 17157725
Is je vraag beantwoord? Dan kan je het draadje zelf sluiten .
Wil je Joomla!NL steunen? Dat kan met een donatie.
  • Astrid
  • Astrid's Profielfoto
  • Moderator + Technisch team
  • Moderator + Technisch team
  • Berichten: 37456

Device pakt juiste css, resized browser niet

22 jan 2015 08:31
#8
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!
  • Sebas
  • Sebas's berichtenfoto Heeft onderwerp gestart
  • Joomla!NL ontdekker
  • Joomla!NL ontdekker
  • Berichten: 29
Moderators: JelleRomke
Tijd voor maken pagina: 0.808 seconden
Gemaakt door Kunena

Wil je Joomla!NL steunen?

Steun Joomla!NLAlle teamleden werken enthousiast, op vrijwillige basis, mee aan Joomla!NL. Maar een website met forum kost nu eenmaal geld. Dus als je Joomla!NL wilt steunen, dan kan dat, graag zelfs!

Lees hier meer informatie