Waarom is mijn site uitgezoomd op mobiel?
Je site is uitgezoomd op mobiel om een van twee redenen: de viewport meta tag ontbreekt, of er staat een element op je pagina dat breder is dan het scherm.
De eerste is een ontbrekende regel code.
Bij de tweede gaat het meestal om een tabel of een afbeelding.
De ontbrekende tag
Zonder die regel gaat een telefoon uit van een bureaubladbreedte en verkleint hij je hele pagina.
Meer daarover lees je bij wat de viewport meta tag is.
Een te breed element
Een tabel, een ingesloten venster of een afbeelding met een vaste breedte. Die duwt je pagina open en dan verschijnt er een horizontale schuifbalk.
Meer daarover lees je bij responsive design.
Hoe je de boosdoener vindt
Maak je browservenster smal en kijk waar de schuifbalk vandaan komt. Meestal zie je meteen welk blok uitsteekt.
Meer daarover lees je bij css.
Mijn vuistregels
- Controleer eerst je viewport-tag.
- Zoek daarna naar een horizontale schuifbalk.
- Geef tabellen een eigen schuifbalk.
- Zet een maximale breedte op je afbeeldingen.
Die laatste lost een groot deel van de gevallen in één regel op.
Bij een ingesloten venster
Een video of kaart met een vaste breedte past niet op een telefoon. Maak hem meeschalend.
Meer daarover lees je bij mobile first.
Wat je daarna controleert
Of je pagina op driehonderdvijfentwintig pixels breed nog past. Dat is het smalste scherm dat je tegenkomt.
Meer daarover lees je bij hoe je verschillende viewports test.