Articles
Introduzione al CSS
Viewport e progettazione reattiva

Viewport e progettazione reattiva

Questo articolo spiega il viewport e la progettazione reattiva.

Imparerai come impostare il viewport utilizzando il tag <meta> e perché è importante.

YouTube Video

HTML per Anteprima

css-responsive-viewport.html 
 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6    <title>CSS Properties Example</title>
 7    <link rel="stylesheet" href="css-base.css">
 8    <link rel="stylesheet" href="css-responsive-viewport.css">
 9</head>
10<body>
11    <!-- Header -->
12    <header>
13        <h1>CSS Properties For Responsive Design</h1>
14    </header>
15
16    <!-- Main content -->
17    <main>
18        <header>
19            <h2>Viewport Properties</h2>
20        </header>
21        <article>
22            <h3>Viewport Example</h3>
23            <section>
24                <header><h4>HTML</h4></header>
25                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
26            </section>
27        </article>
28        <article>
29            <h3>width</h3>
30            <section>
31                <header><h4>HTML</h4></header>
32                <pre>&lt;meta name="viewport" content="width=device-width"&gt;</pre>
33            </section>
34        </article>
35        <article>
36            <h3>height</h3>
37            <section>
38                <header><h4>HTML</h4></header>
39                <pre>&lt;meta name="viewport" content="height=device-height"&gt;</pre>
40            </section>
41        </article>
42        <article>
43            <h3>initial-scale</h3>
44            <section>
45                <header><h4>HTML</h4></header>
46                <pre>&lt;meta name="viewport" content="initial-scale=1.0"&gt;</pre>
47            </section>
48        </article>
49        <article>
50            <h3>minimum-scale</h3>
51            <section>
52                <header><h4>HTML</h4></header>
53                <pre>&lt;meta name="viewport" content="minimum-scale=0.5"&gt;</pre>
54            </section>
55        </article>
56        <article>
57            <h3>maximum-scale</h3>
58            <section>
59                <header><h4>HTML</h4></header>
60                <pre>&lt;meta name="viewport" content="maximum-scale=2.0"&gt;</pre>
61            </section>
62        </article>
63        <article>
64            <h3>user-scalable</h3>
65            <section>
66                <header><h4>HTML</h4></header>
67                <pre>&lt;meta name="viewport" content="user-scalable=no"&gt;</pre>
68            </section>
69        </article>
70        <article>
71            <h3>Viewport Common Examples 1</h3>
72            <section>
73                <header><h4>HTML</h4></header>
74                <pre>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;</pre>
75            </section>
76        </article>
77        <article>
78            <h3>Viewport Common Examples 2</h3>
79            <section>
80                <header><h4>HTML</h4></header>
81<pre>
82&lt;meta name="viewport"
83      content="width=device-width, initial-scale=1.0, user-scalable=no"&gt;
84</pre>
85            </section>
86        </article>
87        <article>
88            <h3>Viewport Common Examples 3</h3>
89            <section>
90                <header><h4>HTML</h4></header>
91                <pre>&lt;meta name="viewport" content="width=1024, initial-scale=1.0"&gt;</pre>
92            </section>
93        </article>
94    </main>
95</body>
96</html>

Informazioni sull'impostazione del viewport in HTML

L'impostazione del viewport viene utilizzata per controllare le informazioni sull'area di visualizzazione (viewport) del dispositivo che visualizza la pagina web. Svolge un ruolo importante soprattutto nell'aggiustare la visualizzazione delle pagine web sui dispositivi mobili.

Cos'è un Viewport?

Il viewport si riferisce all'area di visualizzazione di una finestra del browser o di un dispositivo in cui l'utente sta visualizzando una pagina web. Su un desktop, la dimensione della finestra del browser diventa il viewport, mentre su dispositivi mobili come smartphone e tablet, la dimensione dello schermo del dispositivo diventa il viewport.

Specificare il Viewport

Per controllare il viewport, configuri le impostazioni del viewport usando il tag <meta> in HTML. Questa impostazione consente di specificare come la pagina sarà visualizzata su diversi dispositivi.

Sintassi di Base 

1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Questo codice imposta la larghezza del viewport per corrispondere alla larghezza del dispositivo e la scala di visualizzazione iniziale (livello di zoom) della pagina a 1.0 (visualizzazione al 100%).

Proprietà principali del viewport

Le proprietà che possono essere principalmente specificate con l'attributo content del viewport sono le seguenti:.

  1. width

    • Specifica la larghezza del viewport con width. Impostandolo su device-width, il viewport viene regolato sulla larghezza fisica del dispositivo in pixel.
    • Esempio: width=device-width

  2. height

    • Specifica l'altezza del viewport con height, anche se generalmente viene impostata solo la larghezza e l'altezza non è spesso specificata. Impostandolo su device-height, il viewport corrisponde all'altezza fisica del dispositivo in pixel.
    • Esempio: height=device-height

  3. initial-scale

    • Specifica il livello di zoom iniziale della pagina con initial-scale. 1.0 significa il livello di zoom al 100% del dispositivo.
    • Esempio: initial-scale=1.0

  4. minimum-scale

    • Specifica la scala minima per lo zoom indietro con minimum-scale. Impostandolo a 0.5, è possibile effettuare uno zoom indietro fino al 50%.
    • Esempio: minimum-scale=0.5

  5. maximum-scale

    • Specifica la scala massima per lo zoom avanti con maximum-scale. Impostandolo a 2.0, è possibile effettuare uno zoom avanti fino al 200%.
    • Esempio: maximum-scale=2.0

  6. user-scalable

    • Specifica se l'utente può zoomare la pagina utilizzando user-scalable. Specifica con yes o no.
    • Esempio: Impostare user-scalable=no disabilita lo zoom da parte dell'utente.

Esempi di utilizzo comuni

  1. Impostazioni Responsive Standard
1<meta name="viewport" content="width=device-width, initial-scale=1.0">

Questa impostazione regola automaticamente la pagina per adattarsi alla larghezza dello schermo dei dispositivi mobili e garantisce che la pagina venga visualizzata con un livello di zoom del 100%. È un'impostazione fondamentale per il design reattivo.

  1. Disabilitare lo Zoom
1<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

Questa impostazione disabilita lo zoom da parte dell'utente. Viene utilizzato quando lo zoom non è necessario per un design specifico o quando le operazioni di zoom possono causare problemi di layout.

  1. Livelli di Zoom Fissi e Larghezza del Viewport
1<meta name="viewport" content="width=1024, initial-scale=1.0">

Questa impostazione fissa la larghezza del viewport a 1024 pixel e imposta il livello di zoom al 100% nella visualizzazione iniziale. Viene utilizzato quando si desidera mantenere costante la larghezza della pagina indipendentemente dalla larghezza del dispositivo.

Ruolo del viewport

Impostare il viewport è essenziale per ottimizzare la visualizzazione, specialmente sui dispositivi mobili. Configurando correttamente il viewport, è possibile prevenire problemi come i seguenti:.

  • Impedisce che la pagina superi la larghezza del dispositivo, evitando così la necessità di scorrere.
  • Impedisce ai testi e alle immagini di diventare troppo piccoli per essere letti facilmente.
  • Impedisce che l'intera pagina venga rimpicciolita, rendendo difficile l'interazione.

Riepilogo

  • Il viewport viene utilizzato per controllare l'area di visualizzazione del dispositivo che mostra la pagina web.
  • È principalmente utilizzato per adattare la visualizzazione sui dispositivi mobili e svolge un ruolo importante nel design responsivo.
  • Impostazioni come width=device-width e initial-scale=1.0 sono comunemente utilizzate nel design web responsivo standard.

Impostare correttamente il viewport può offrire agli utenti mobili un'esperienza di visualizzazione confortevole.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Panoramica del design reattivo in CSS