Un viewport si riferisce all'area visibile attraverso la quale gli utenti interagiscono con il contenuto su un dispositivo di visualizzazione o all'interno di un'applicazione software. Il concetto è comune in vari campi, tra cui web design, computer grafica e realtà virtuale.
Come impostare l'area di visualizzazione
Le finestre vengono impostate in modo diverso a seconda del linguaggio di programmazione.
Come impostare la visualizzazione in HTML
Impostazione del viewport HTML è fondamentale per creare progetti web reattivi che si adattino bene alle varie dimensioni dello schermo, in particolare sui dispositivi mobili. Ciò si ottiene in genere utilizzando il file tag all'interno del tuo documento HTML sezione. IL vista il meta tag indica al browser come controllare le dimensioni e il ridimensionamento della pagina.
Ecco una guida di base su come impostare il viewport in un documento HTML:
Utilizza il meta tag Viewport
Nelle sezione del tuo HTML, includi quanto segue arrivo etichetta:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ripartizione degli attributi dei meta tag del viewport
- nome="finestra": questo attributo specifica che il meta tag sta impostando le opzioni per il viewport.
- contenuto="larghezza=larghezza-dispositivo": imposta la larghezza del viewport in modo che corrisponda alla larghezza dello schermo del dispositivo. Ciò garantisce che la pagina utilizzi la larghezza effettiva del dispositivo per il rendering, il che è essenziale per il responsive design.
- contenuto="initial-scale=1.0": controlla il livello di zoom iniziale quando la pagina viene caricata per la prima volta. Impostandolo su 1.0 garantisce che la pagina venga visualizzata in scala 1:1, senza alcuno zoom.
Opzioni aggiuntive
- scala minima e scala massima: Questi attributi definiscono rispettivamente i livelli di zoom minimo e massimo che l'utente può raggiungere. Per esempio, scala minima=1.0 ed scala massima=5.0.
- scalabile dall'utente: Questo può essere impostato su sì or no (o 1 or 0) per consentire o impedire all'utente di ridimensionare (zoom) la pagina web. Per esempio, scalabile dall'utente=no impedisce lo zoom, che potrebbe essere utile in alcuni progetti ma può anche ostacolare l'accessibilità .
Esempio completo
Ecco come potresti impostare una finestra in un documento HTML con opzioni aggiuntive:
<!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>
Cose da ricordare
Limitando al contempo la capacità degli utenti di eseguire lo zoom con scalabile dall'utente=no o impostando rigidi scala massima contribuisce alla coerenza del design, in genere è consigliabile evitare di limitare lo zoom per garantire che le persone con disabilità visive possano comunque utilizzare il tuo sito in modo efficace.
Dopo aver impostato l'area visibile, testa la tua pagina web su vari dispositivi e dimensioni dello schermo per assicurarti che il layout e il ridimensionamento si comportino come previsto.
Come impostare la visualizzazione nei CSS
Impostazione del viewport CSS non implica direttamente un'impostazione "viewport" perché la viewport è fondamentalmente un concetto HTML e browser, gestito principalmente tramite <meta name="viewport"> etichetta in HTML. Tuttavia, i CSS svolgono un ruolo cruciale nella creazione di design reattivi che si adattano alle dimensioni del viewport tramite query multimediali, flexlayout flessibili e unità scalabili.
Concetti chiave
Per rendere i progetti reattivi e adattabili a qualsiasi dimensione del viewport, utilizzare le seguenti tecniche CSS:
- Domande multimediali. Le media query sono la pietra angolare del responsive design nei CSS. Consentono di applicare stili in base alla larghezza, all'altezza, all'orientamento e ad altre caratteristiche della finestra. La seguente media query applica un colore di sfondo al corpo quando la larghezza del viewport è pari o inferiore a 600 pixel, indicando in genere un dispositivo mobile.
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}- Flexlayout bili. utilizzando flexLarghezze e altezze variabili anziché dimensioni fisse garantiscono che il layout si adatti alla finestra. È possibile utilizzare percentuali, vw (larghezza della finestra), vh (altezza della finestra) e altre unità relative per definire le dimensioni. Questo esempio mostra come fare in modo che il contenitore occupi l'80% della larghezza dell'area visibile, regolandosi automaticamente al variare delle dimensioni dell'area visibile.
.container {
width: 80%;
margin: auto;
}- FlexImmagini e media disponibili. Per evitare che immagini e video superino la larghezza del viewport e rompano il layout, creali flexable. Il codice seguente garantisce che le immagini e i video vengano ridimensionati per adattarsi alla larghezza dell'elemento che li contiene, fino alla dimensione originale.
img, video {
max-width: 100%;
height: auto;
}- Unità della finestra. I CSS offrono unità relative alla vista, tra cui vw (larghezza della vista), vh (altezza della vista), vmin (il più piccolo tra vw o vh) e vmax (il più grande tra vw o vh). Questi possono essere utili per creare elementi che si ridimensionano dinamicamente con la finestra.
.hero {
height: 50vh; /* 50% of the viewport height */
font-size: 4vw; /* font size scales with the viewport width */
}- Griglia CSS e Flexscatola. Griglia CSS e Flexbox sono potenti modelli di layout che forniscono flexmodi possibili per progettare interfacce reattive senza dover utilizzare float e posizionamento. Flexbox è ideale per layout in una dimensione, sia in una riga che in una colonna. Questo layout a griglia consente agli elementi di essere disposti in nuove righe secondo necessità , adattandosi alle dimensioni della finestra.
.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));
}Visualizzazione e SEO
L'impostazione del viewport gioca un ruolo cruciale nella SEO poiché influisce direttamente sull'esperienza dell'utente su diversi dispositivi, in particolare sui dispositivi mobili. I motori di ricerca come Google attribuiscono particolare importanza alla compatibilità mobile come fattore di ranking, riconoscendo la tendenza crescente della navigazione in Internet su dispositivi mobili.
Quando un sito Web è progettato con un'impostazione della finestra reattiva, garantisce che il contenuto venga ridimensionato e adattato correttamente per adattarsi alle varie dimensioni dello schermo, dai desktop agli smartphone. Questa reattività migliora il coinvolgimento degli utenti fornendo un'esperienza di navigazione fluida, riducendo la frequenza di rimbalzo e aumentando il tempo trascorso sul sito. Di conseguenza, i siti web ottimizzati per i dispositivi mobili con impostazioni di visualizzazione appropriate hanno maggiori probabilità di posizionarsi più in alto nelle pagine dei risultati dei motori di ricerca (SERP).
Inoltre, Google e altri motori di ricerca utilizzano l’indicizzazione mobile-first, nel senso che utilizzano prevalentemente la versione mobile del contenuto per l’indicizzazione e il posizionamento. A questo scopo è essenziale un viewport ben configurato, poiché indica al browser come gestire il ridimensionamento e il rendering su schermi più piccoli. Se l'area visibile di un sito non è impostata correttamente, potrebbe non essere visualizzata correttamente sui dispositivi mobili, determinando un'esperienza utente scadente che incide negativamente sulla SEO del sito perché
Procedure consigliate per il viewport
L'adesione alle best practice del viewport è essenziale per creare siti Web reattivi e di facile utilizzo che funzionino bene su un'ampia gamma di dispositivi. Ecco alcune best practice chiave da considerare.
1. Utilizza il meta tag Viewport
Includi sempre il meta tag viewport nel file dei tuoi documenti HTML per controllare le dimensioni e il ridimensionamento della finestra su diversi dispositivi. Questo tag garantisce che il tuo sito venga visualizzato correttamente su tutti i dispositivi impostando la larghezza del viewport in modo che corrisponda alla larghezza del dispositivo e la scala iniziale su 1.
2. Assicurati che il contenuto non sia più largo dello schermo
Progetta il layout e i contenuti per evitare lo scorrimento orizzontale. Utilizza le query multimediali CSS per adattare il layout del tuo sito in modo che si adatti ai limiti delle varie dimensioni dello schermo. I contenuti che fuoriescono dal bordo dello schermo creano un'esperienza utente scadente e compromettono il punteggio di ottimizzazione mobile del tuo sito, incidendo sulla SEO.
3. Utilizzare tecniche di progettazione reattiva
Utilizzare flexlayout di griglia, immagini e query multimediali CSS flessibili per creare un design reattivo che si adatta al dispositivo dell'utente. Il design reattivo garantisce che il tuo sito web offra facilità di lettura e navigazione con un minimo di ridimensionamento, panoramica e scorrimento.
4. Adottare un approccio mobile-first
Progetta prima il tuo sito per i dispositivi mobili, quindi adattalo a schermi più grandi. Ciò implica dare priorità ai contenuti e alle funzionalità essenziali per gli utenti mobili. Un approccio mobile-first è in linea con il modo in cui la maggior parte degli utenti accede oggi a Internet e con le pratiche di indicizzazione mobile-first dei motori di ricerca.
5. Ottimizza per le interazioni touch
Gli elementi di progettazione come pulsanti e collegamenti dovrebbero essere facilmente toccabili, con dimensioni e spaziatura adeguate per evitare tocchi accidentali. L'ottimizzazione per il tocco migliora l'usabilità del tuo sito sui dispositivi touchscreen, migliorando l'esperienza e il coinvolgimento complessivi dell'utente.
6. Abilita lo zoom quando appropriato
Mentre è comune impostare scalabile dall'utente=no per bloccare la scala del viewport su alcune applicazioni web, valuta la possibilità di consentire lo zoom su pagine ricche di contenuti. Gli utenti potrebbero dover ingrandire per visualizzare testo o immagini in modo più confortevole, soprattutto su dispositivi con schermi piccoli. Consentire lo zoom può migliorare l'accessibilità e la soddisfazione dell'utente.
7. Test su dispositivi e browser
Testa regolarmente la reattività e le prestazioni del tuo sito web su una varietà di dispositivi e browser per garantire la compatibilità . Dispositivi e browser diversi potrebbero visualizzare il tuo sito in modi leggermente diversi. I test aiutano a identificare e correggere i problemi, garantendo un'esperienza utente coerente e positiva per tutti i visitatori.
