Mobiel: past de pagina op een telefoon? Mobile
Het telefoonicoon opent de pagina op echte telefoonbreedte. Je ziet meteen of iets over de rand steekt of te klein is.
1Wat is het?
De mobiele check opent de huidige pagina in een venster van 360, 390 of 430 pixels breed en meet of de inhoud breder is dan het venster. Plus de viewport-tag en de kleinste lettergrootte.
2Waarom belangrijk?
Google beoordeelt de mobiele versie van de pagina. Een tabel die rechts uitloopt of een afbeelding zonder max-width maakt de hele pagina onhandig, en op een desktop zie je dat niet.
3Wat TagSpion controleert
| Controle | Beoordeling |
|---|---|
| Viewport-tag | rood als die ontbreekt of user-scalable=no heeft |
| Horizontaal scrollen | rood als de pagina breder is dan het venster, met het element dat het veroorzaakt |
| Kleinste letter | geel onder 12 pixels |
4Zo los je het op
- Viewport-tag zetten, afbeeldingen en tabellen begrenzen met max-width: 100 %, tabellen in een scrollbare container plaatsen.
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
img, video, table { max-width: 100%; height: auto; }
.table-wrap { overflow-x: auto; } /* <div class="table-wrap"><table>…</table></div> */
</style>5Veelgestelde vragen
Vervangt dit echte toestellen?
Nee, maar het is een snelle eerste test. Het venster heeft de breedte, niet de touchbediening van een telefoon.