Diseño de página web responsive -Viewport

什么是视口？

视口（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. No utilice elementos de anchura fija grande - Por ejemplo, si el ancho de la imagen es mayor que el ancho de la ventana de vista, puede causar que la ventana de vista se desplace horizontalmente. Asegúrese de ajustar este contenido para que se ajuste al ancho de la ventana de vista.

2. No permita que el contenido dependa de una anchura de viewport específica para presentar un buen efecto - Debido a que el tamaño y anchura de la pantalla en píxeles varía mucho entre dispositivos, el contenido no debe depender de una anchura de viewport específica para presentar un buen efecto.

3. Use consultas de medios CSS para aplicar estilos diferentes a pantallas pequeñas y grandes - Establecer un ancho CSS absoluto grande para los elementos de la página puede hacer que el elemento sea demasiado ancho para la vista de la ventana de dispositivos más pequeños. En su lugar, debe considerar usar valores de anchura relativa, como width: 100%. Además, tenga cuidado al usar valores de posición absoluta grandes, lo que puede hacer que el elemento se deslice fuera de la vista de la ventana de dispositivos pequeños.