Ƙirarar ƙarantaw - Ƙirarar

什么是视口?

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

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

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

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

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

设置视口

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

您应该在所有网页中包含以下 视口元素:


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

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

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

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

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

把内容调整到视口的大小

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

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

Duba ce guda suka kai kada

1. Ƙarantaw ƙarantaw ƙarantaw - Misali, ƙarantaw ƙarantaw

2. Ƙarantaw ƙarantaw ƙarantaw - Ƙarantaw ƙarantaw ƙarantaw

3. Tsaɗaɗaɗin ƙarantaw ƙarantaw ƙarantaw - Tsaɗaɗaɗin ƙarantaw ƙarantaw ƙarantaw