Progettazione della pagina web responsive - Visibile

什么是视口？

视口（viewport）是用户在网页上的可见区域。

视口随设备而异，在移动电话上会比在计算机屏幕上更小。

在平板电脑和手机之前，网页仅设计为用于计算机屏幕，并且网页拥有静态设计和固定大小是很常见的。

然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大了，无法适应视口。为了解决这个问题，这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。

这并不是完美的！勉强是一种快速的修正。

设置视口

HTML5 引入了一种方法，使 Web 设计者可以通过 <meta> 标签来控制视口。

您应该在所有网页中包含以下 <meta> 视口元素：

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

它为浏览器提供了关于如何控制页面尺寸和缩放比例的指令。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度（视设备而定）。

当浏览器首次加载页面时，initial-scale=1.0 部分设置初始缩放级别。

下面分别是不带视口 meta 标签的网页、以及带视口 meta 标签的网页的例子：

提示：如果您使用手机或平板电脑浏览这张页面，则可以单击下面的两个链接以查看不同之处。



没有视口元标记


带有视口元标记

把内容调整到视口的大小

用户习惯在台式机和移动设备上垂直滚动网站，而不是水平滚动！

因此，如果迫使用户水平滚动或缩小以查看整个网页，则会导致不佳的用户体验。

还需要遵循的一些附加规则：

1. Non usare elementi con larghezza fissa grande - Ad esempio, se la larghezza dell'immagine è maggiore della larghezza del viewport, può causare lo scorrimento orizzontale del viewport. Assicurati di adattare questo contenuto alla larghezza del viewport.

2. Non far dipendere il contenuto da una larghezza di viewport specifica per ottenere un effetto buono - Poiché le dimensioni e le larghezze degli schermi in pixel variano molto tra i dispositivi, il contenuto non dovrebbe dipendere da una larghezza di viewport specifica per ottenere un effetto buono.

3. Usare le query di media CSS per applicare stili diversi a schermi piccoli e grandi - Impostare una larghezza CSS assoluta grande per gli elementi della pagina può causare che l'elemento sia troppo largo per il viewport di dispositivi più piccoli. Piuttosto, considerare l'uso di valori di larghezza relativa, come width: 100%. Inoltre, usare con cautela valori di posizionamento assoluti grandi, che possono far scivolare l'elemento al di fuori del viewport di dispositivi di piccola dimensione.