Een viewport verwijst naar het zichtbare gebied waardoor gebruikers interactie hebben met inhoud op een weergaveapparaat of binnen een softwareapplicatie. Het concept is gebruikelijk op verschillende gebieden, waaronder webontwerp, computergraphics en virtual reality.
Viewport instellen
Viewports zijn anders ingesteld, afhankelijk van de programmeertaal.
Viewport instellen in HTML
Het kijkvenster instellen HTML is cruciaal voor het creรซren van responsieve webontwerpen die zich goed aanpassen aan verschillende schermformaten, vooral op mobiele apparaten. Dit wordt meestal bereikt door gebruik te maken van de tag in uw HTML-document sectie. De uitkijk postje metatag instrueert de browser hoe de afmetingen en schaling van de pagina moeten worden beheerd.
Hier is een basishandleiding voor het instellen van de viewport in een HTML-document:
Gebruik de Viewport-metatag
Binnen sectie van uw HTML, neem het volgende op meta label:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Uitsplitsing van de attributen van de Viewport-metatag
- naam="kijkvenster": dit kenmerk geeft aan dat de metatag opties voor de viewport instelt.
- content="width=apparaatbreedte": Hiermee wordt de breedte van de viewport ingesteld zodat deze overeenkomt met de schermbreedte van het apparaat. Dit zorgt ervoor dat de pagina de werkelijke apparaatbreedte gebruikt voor weergave, wat essentieel is voor responsief ontwerp.
- content="initiรซle schaal=1.0": Hiermee regelt u het aanvankelijke zoomniveau wanneer de pagina voor het eerst wordt geladen. Als u deze op 1.0 instelt, wordt de pagina op een schaal van 1:1 weergegeven, zonder enige zoom.
Extra opties
- minimale schaal en maximale schaal: deze attributen definiรซren respectievelijk de minimale en maximale zoomniveaus die de gebruiker kan bereiken. Bijvoorbeeld, minimumschaal=1.0 en maximale schaal = 5.0.
- door de gebruiker schaalbaar: Dit kan worden ingesteld op ja or geen (of 1 or 0) om de gebruiker wel of niet toe te staan โโde webpagina te schalen (inzoomen). Bijvoorbeeld, door gebruiker schaalbaar=nee verhindert zoomen, wat handig kan zijn bij bepaalde ontwerpen, maar ook de toegankelijkheid kan belemmeren.
Volledig voorbeeld
Hier ziet u hoe u een viewport in een HTML-document kunt instellen met extra opties:
<!DOCTYPE html>
<html>
<head>
<title>Responsive Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, user-scalable=yes">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a responsive webpage.</p>
</body>
</html>
Dingen om te onthouden
Terwijl de mogelijkheid van gebruikers om mee te zoomen wordt beperkt door gebruiker schaalbaar=nee of door streng te stellen maximale schaal bijdraagt โโaan de consistentie van het ontwerp, wordt over het algemeen aanbevolen om de zoomfunctie niet te beperken, zodat mensen met een visuele beperking uw site nog steeds effectief kunnen gebruiken.
Nadat u de viewport heeft ingesteld, test u uw webpagina op verschillende apparaten en schermformaten om er zeker van te zijn dat de lay-out en schaling zich naar verwachting gedragen.
Viewport instellen in CSS
Het kijkvenster instellen CSS heeft niet direct betrekking op een "viewport"-instelling, omdat de viewport in wezen een HTML- en browserconcept is, dat voornamelijk wordt beheerd via de <meta name="viewport"> taggen in HTML. CSS speelt echter een cruciale rol bij het creรซren van responsieve ontwerpen die zich via mediaquery's aanpassen aan de grootte van de viewport. flexmogelijke lay-outs en schaalbare eenheden.
Lesdoelen
Gebruik de volgende CSS-technieken om ontwerpen responsief en aanpasbaar aan elke viewport-grootte te maken:
- Mediavragen. Mediaquery's vormen de hoeksteen van responsief ontwerp in CSS. Hiermee kunt u stijlen toepassen op basis van de breedte, hoogte, oriรซntatie en andere kenmerken van het venster. De volgende mediaquery past een achtergrondkleur toe op de hoofdtekst wanneer de viewportbreedte 600 pixels of minder is, wat doorgaans duidt op een mobiel apparaat.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}- Flexbare lay-outs. gebruik flexFlexibele breedtes en hoogtes in plaats van vaste formaten zorgen ervoor dat uw lay-out zich aanpast aan de viewport. U kunt percentages, vw (viewportbreedte), vh (viewporthoogte) en andere relatieve eenheden gebruiken om afmetingen te definiรซren. Dit voorbeeld laat zien hoe u ervoor kunt zorgen dat de container 80% van de breedte van de viewport in beslag neemt, en automatisch wordt aangepast naarmate de grootte van de viewport verandert.
.container {
width: 80%;
margin: auto;
}- Flexbare afbeeldingen en media. Om te voorkomen dat afbeeldingen en video's de breedte van de viewport overschrijden en uw lay-out verstoren, kunt u ze maken flexmogelijk. De volgende code zorgt ervoor dat afbeeldingen en video's worden verkleind zodat ze passen in de breedte van het element dat ze bevatten, tot hun oorspronkelijke grootte.
img, video {
max-width: 100%;
height: auto;
}- Viewport-eenheden. CSS biedt viewport-relatieve eenheden, waaronder vw (viewportbreedte), vh (viewporthoogte), vmin (de kleinste van vw of vh) en vmax (de grootste van vw of vh). Deze kunnen handig zijn voor het maken van elementen die dynamisch schalen met de viewport.
.hero {
height: 50vh; /* 50% of the viewport height */
font-size: 4vw; /* font size scales with the viewport width */
}- CSS-raster en Flexdoos. CSS-raster en Flexbox zijn krachtige lay-outmodellen die daarvoor zorgen flexmanieren om responsieve interfaces te ontwerpen zonder gebruik te hoeven maken van floats en positionering. Flexbox is ideaal voor lay-outs in รฉรฉn dimensie, zowel in een rij als in een kolom. Met deze rasterindeling kunnen items indien nodig in nieuwe rijen worden geplaatst, aangepast aan de grootte van de viewport.
.flex-container {
display: flex;
justify-content: space-around;
}
CSS Grid excels at two-dimensional layouts, managing both rows and columns.
<strong><code>
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}Viewport en SEO
De viewport-instelling speelt een cruciale rol bij SEO, omdat deze rechtstreeks van invloed is op de gebruikerservaring op verschillende apparaten, vooral op mobiel. Zoekmachines zoals Google leggen grote nadruk op mobielvriendelijkheid als rankingfactor, en erkennen daarmee de groeiende trend van surfen op internet op mobiele apparaten.
Wanneer een website is ontworpen met een responsieve viewport-instelling, zorgt dit ervoor dat de inhoud op de juiste manier wordt geschaald en aangepast aan verschillende schermformaten, van desktops tot smartphones. Dit reactievermogen verbetert de gebruikersbetrokkenheid door een naadloze browse-ervaring te bieden, het bouncepercentage te verminderen en de tijd die op de site wordt doorgebracht te vergroten. Bijgevolg zullen websites die zijn geoptimaliseerd voor mobiele apparaten met de juiste viewport-instellingen waarschijnlijk hoger scoren op de resultatenpagina's van zoekmachines (SERP's).
Bovendien gebruiken Google en andere zoekmachines mobile-first indexering, wat betekent dat ze voornamelijk de mobiele versie van de inhoud gebruiken voor indexering en ranking. Hiervoor is een goed geconfigureerde viewport essentieel, omdat deze de browser vertelt hoe hij moet omgaan met schalen en renderen op kleinere schermen. Als de viewport van een site niet correct is ingesteld, wordt deze mogelijk niet goed weergegeven op mobiele apparaten, wat leidt tot een slechte gebruikerservaring die een negatieve invloed heeft op de SEO van een site, omdat
Best practices van Viewport
Het volgen van de best practices voor viewports is essentieel voor het creรซren van responsieve, gebruiksvriendelijke websites die goed presteren op een breed scala aan apparaten. Hier volgen enkele belangrijke best practices waarmee u rekening moet houden.
1. Gebruik de Viewport-metatag
Neem altijd de viewport-metatag op in de sectie van uw HTML-documenten om de grootte en schaal van de viewport op verschillende apparaten te beheren. Deze tag zorgt ervoor dat uw site correct wordt weergegeven op alle apparaten door de viewportbreedte in te stellen op de breedte van het apparaat en de initiรซle schaal op 1 te zetten.
2. Zorg ervoor dat de inhoud niet breder is dan het scherm
Ontwerp uw lay-out en inhoud zo dat horizontaal scrollen wordt voorkomen. Gebruik CSS-mediaquery's om de lay-out van uw site aan te passen zodat deze binnen de grenzen van verschillende schermformaten past. Inhoud die over de rand van het scherm valt, zorgt voor een slechte gebruikerservaring en heeft een negatieve invloed op de mobielvriendelijkheidsscore van uw site, wat gevolgen heeft voor SEO.
3. Gebruik responsieve ontwerptechnieken
gebruik maken van flexrasterlay-outs, afbeeldingen en CSS-mediaquery's om een โโresponsief ontwerp te creรซren dat zich aanpast aan het apparaat van de gebruiker. Een responsief ontwerp zorgt ervoor dat uw website gemakkelijk te lezen en te navigeren is, met een minimum aan vergroten/verkleinen, pannen en scrollen.
4. Kies voor een mobile-first-aanpak
Ontwerp uw site eerst voor mobiele apparaten en schaal deze vervolgens op naar grotere schermen. Hierbij wordt prioriteit gegeven aan inhoud en functionaliteit die essentieel zijn voor mobiele gebruikers. Een mobile-first-benadering sluit aan bij de manier waarop de meerderheid van de gebruikers tegenwoordig toegang heeft tot internet en bij de mobile-first-indexeringspraktijken van zoekmachines.
5. Optimaliseren voor aanraakinteracties
Ontwerpelementen zoals knoppen en links moeten gemakkelijk te tikken zijn, met de juiste grootte en tussenruimte om onbedoeld tikken te voorkomen. Door te optimaliseren voor aanraking wordt de bruikbaarheid van uw site op touchscreen-apparaten verbeterd, waardoor de algehele gebruikerservaring en betrokkenheid worden verbeterd.
6. Schakel zoom in indien nodig
Hoewel het gebruikelijk is om in te stellen door gebruiker schaalbaar=nee Om de schaal van de viewport op sommige webapplicaties te vergrendelen, kunt u overwegen zoomen toe te staan โโop pagina's met veel inhoud. Gebruikers moeten mogelijk inzoomen om tekst of afbeeldingen comfortabeler te kunnen bekijken, vooral op apparaten met kleine schermen. Het toestaan โโvan zoom kan de toegankelijkheid en gebruikerstevredenheid verbeteren.
7. Test op verschillende apparaten en browsers
Test regelmatig de responsiviteit en prestaties van uw website op verschillende apparaten en browsers om compatibiliteit te garanderen. Verschillende apparaten en browsers kunnen uw site op enigszins verschillende manieren weergeven. Testen helpt bij het identificeren en corrigeren van problemen, waardoor een consistente en positieve gebruikerservaring voor alle bezoekers wordt gegarandeerd.
