视口是网页的用户可见区域。
视口因设备而异,并且在手机上会比在计算机屏幕上小。
在平板电脑和手机出现之前,网页仅针对计算机屏幕而设计,并且常见于 网页具有静态设计和固定尺寸。
然后,当我们开始使用平板电脑和手机上网时,固定 size 网页太大,无法适应视口。 为了解决这个问题,这些设备上的浏览器缩小了整个网页以适应屏幕。
这并不完美!但要快速解决。
HTML5 引入了一种让网页设计者通过以下方式控制视口的方法: 标签。
您应该在所有网页中包含以下 视口元素:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这为浏览器提供了如何操作的说明 控制页面的尺寸和缩放比例。
width=device-width
部分设置页面的宽度以遵循设备的屏幕宽度(根据设备的不同而有所不同)。
initial-scale=1.0
部分设置浏览器首次加载页面时的初始缩放级别。
下面是一个没有视口元标记的网页示例,以及带有视口元标记的同一网页:
提示:如果您使用手机或平板电脑浏览此页面,可以点击上面的两个链接查看区别。
用户习惯在桌面和移动设备上垂直滚动网站 设备 - 但不是水平的!
因此,如果用户被迫水平滚动或缩小才能看到 整个网页会导致糟糕的用户体验。
需要遵循的一些附加规则:
1.不要使用大的固定宽度元素 - 例如,如果 图像以比视口更宽的宽度显示,可能会导致 视口水平滚动。请记住调整此内容以适应 视口的宽度。
2.不要让内容依赖于特定的视口宽度 渲染良好 - 由于屏幕尺寸和 CSS 像素宽度各不相同 在设备之间广泛使用,内容不应依赖于特定的视口宽度 渲染得很好。
3.使用 CSS 媒体查询为小型和小型应用应用不同的样式 大屏幕 - 为页面元素设置大的绝对 CSS 宽度 将导致元素对于较小设备上的视口来说太宽。 相反,请考虑使用相对宽度值,例如 width: 100%。也是 小心使用大的绝对定位值。它可能会导致该元素 在小型设备上落在视口之外。