Makusanyiko wa RWD -Viewport

什么是视口？

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

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

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

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

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

设置视口

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

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

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

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

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

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

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



没有视口元标记


带有视口元标记

把内容调整到视口的大小

Watumiaji wana haki kusoma kwa kifungu kwa kusoma kwa kipimo cha kifungu, hata kama haukumwengi kusoma kwa kifungu kwa kusoma kwa kifungu!

Kwa hivyo, kama inafikia kumsekana mtumishi kwa kusoma kifungu kwa uharibifu wa kusoma, hii inakuaa kufikiria kwa mtumishi.

Mamboja ya kuleta kutosha:

1. 请勿使用较大的固定宽度元素 - 例如，如果图像的宽度大于视口的宽度，则可能导致视口水平滚动。请务必调整此内容以适合视口的宽度。

2. 不要让内容依赖于特定的视口宽度来呈现好的效果 - 由于以 CSS 像素计的屏幕尺寸和宽度在设备之间变化很大，因此内容不应依赖于特定的视口宽度来呈现良好的效果。

3. 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置较大的 CSS 绝对宽度将导致该元素对于较小设备上的视口太宽。而是应该考虑使用相对宽度值，例如 width: 100%。另外，要小心使用较大的绝对定位值，这可能会导致元素滑落到小型设备的视口之外。