jquery.app
Nederlands
EnglishDeutschFrancaisEspanol日本語Nederlands

SEO-tools

Gratis Viewport Meta Tag Generator

Genereer een complete set viewport meta tags plus theme-color en Apple touch icon links.

Tool laden...

Wat is Viewport Meta Tag Generator?

De viewport-meta-tag bepaalt hoe een pagina schaalt op mobiele browsers en is daarmee een van de belangrijkste tags voor responsive design. De theme-color-meta-tag stelt de kleur van de browserchrome in op mobiele browsers en desktopbrowsers die dit ondersteunen. Apple touch-icon-linktags defini毛ren het pictogram dat wordt getoond wanneer een bezoeker de pagina aan het iOS-startscherm toevoegt. Samen vormen deze tags de mobiele presentatielaag die elke moderne HTML-pagina zou moeten bevatten, maar elk heeft een specifieke syntax die gemakkelijk fout kan gaan.

Snel antwoord

Gebruik de viewport-meta-tag om te bepalen hoe uw pagina schaalt op mobiele apparaten. De standaardwaarde width=device-width met initial-scale=1 werkt voor bijna elke responsieve site en zorgt voor leesbare tekst zonder dat in- en uitzoombewegingen nodig zijn.

Last updated: 2026-06-11

Beperkingen

  • theme-color heeft alleen invloed op de browserchrome op ondersteunde mobiele browsers. Desktopbrowsers en sommige browserconfiguraties negeren het volledig.
  • Apple touch-icon-tags vereisen een echt PNG-afbeeldingsbestand op het opgegeven pad. Een ontbrekend of onjuist pad produceert stilletjes een verbroken pictogram op iOS.
  • De viewport-tag regelt de initi锟絣e schaal, maar maakt een niet-responsieve lay-out niet bruikbaar op mobiel. Het moet worden gecombineerd met een responsief ontwerp dat CSS-mediaquery's gebruikt.

Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub

Zo gebruik je deze tool

  1. Stel de viewport-breedte en initi锟絣e schaal in. De standaardwaarden zijn width=device-width en initial-scale=1.
  2. Voer een themakleur in als hexadecimale waarde, zoals #ffffff voor wit of een kleur die overeenkomt met uw site-header.
  3. Voer het pad naar uw Apple touch-iconbestand in. Een PNG van 180 bij 180 pixels is de standaardmaat.
  4. Kopieer alle gegenereerde tags en plak ze in de head-sectie van uw HTML-pagina.

Waarvoor je het kunt gebruiken

  • De mobiele viewport-tag instellen voor een nieuwe statische HTML-pagina v锟斤拷r implementatie.
  • PWA-ready metatags toevoegen, inclusief theme-color en Apple touch-icon, voor een startscherm-installatie-ervaring.
  • Mobiele metatags standaardiseren in een sjabloon voor meerdere pagina's, zodat elke pagina dezelfde viewportconfiguratie gebruikt.

Gebruik

Praktische voorbeelden

Voorbeeld

Standaard responsieve pagina-instelling

Een nieuwe landingspagina heeft width=device-width, initial-scale=1, een witte themakleur en een standaard Apple touch-icon nodig. De generator produceert alle drie tags op basis van de invoervelden.

Voorbeeld

PWA-ready configuratie

Een webapp gebruikt een blauwe merkthemakleur en een aangepast Apple touch-icon met transparante achtergrond. De generator maakt de tags met de exacte hex-kleur en het pictogrampad.

Veelgemaakte fouten

  • Het instellen van user-scalable=no, waardoor knijp-om-te-zoomen wordt geblokkeerd en een toegankelijkheidsbarri锟斤拷re ontstaat voor slechtziende gebruikers.
  • Het gebruiken van een onjuist of ontbrekend Apple touch-iconpad, wat resulteert in een verbroken pictogram wanneer het aan het startscherm wordt toegevoegd.
  • Vergeten om viewport-fit=cover op te nemen voor pagina's die zich uitstrekken tot het volledige weergavegebied op telefoons met een notch.

Verificatie

  1. Open de gepubliceerde pagina op een echt mobiel apparaat en controleer of de inhoud binnen de schermbreedte past zonder horizontaal scrollen.
  2. Inspecteer de gegenereerde tags in de HTML-head met behulp van browser DevTools om te controleren of de viewport-, theme-color- en Apple touch-icon-paden correct zijn.

FAQ

Vragen over Viewport Meta Tag Generator

Wat moet de viewport-breedte zijn?

Gebruik width=device-width voor bijna alle responsieve pagina's. Dit vertelt de browser om de apparaatbreedte te gebruiken in plaats van een desktop-formaat viewport aan te nemen.

Heb ik Apple touch-icon nodig voor een website die geen PWA is?

Apple touch-icon zijn nog steeds nuttig voor gewone websites omdat iOS-gebruikers elke pagina aan hun startscherm kunnen toevoegen. Zonder het pictogram gebruikt iOS een screenshot van de pagina als pictogram.

Moet ik user-scalable uitschakelen?

Nee. Het instellen van user-scalable=no blokkeert knijp-om-te-zoomen en cre锟絜rt een toegankelijkheidsbarri锟斤拷re voor slechtziende gebruikers. WCAG vereist dat gebruikers pagina's tot minstens 200% kunnen zoomen.

Wat gebeurt er als ik de viewport-meta-tag helemaal weglaat?

Mobiele browsers nemen aan dat de pagina voor desktop is ontworpen en geven deze weer met een standaardbreedte van ongeveer 980px, waarna deze wordt verkleind om op het scherm te passen. Tekst wordt klein en vereist zoomen om te lezen. De pagina kan ook mobiele bruikbaarheidsfouten in Google Search Console veroorzaken. Elke responsieve pagina moet een viewport-meta-tag in de head bevatten.

Gerelateerde tools

Meer seo-tools

Probeer ook

Probeer ook

Html

CSP Hash Generator

Genereer CSP-hashwaarden voor inline scripts en styles. Hash exacte code met SHA-256, SHA-384 of SHA-512.

Open tool