W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

响应式网页设计 - Viewport



什么是 Viewport?

Viewport 是用户网页的可视区域。

Viewport 随设备而异,在移动电话上比在电脑屏幕上要小。

在平板电脑和移动电话之前,网页只为电脑屏幕设计,网页的静态设计和固定大小是很常见的。

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

这并不完美!但可快速修复。


设置 Viewport

HTML5引入了一种方法,让Web设计者通过 <meta> 标记控制viewport。

你应该在所有网页中包含以下 <meta> 窗口元素:

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

<meta> 窗口元素为浏览器提供了如何控制页面尺寸和缩放的说明。

width=device-width 部分将页面的宽度设置为跟随设备的屏幕宽度(其将根据设备变化而变化)。

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

以下是没有viewport标记的实例以及具有viewport标记的网页:

提示: 如果您使用手机或平板电脑浏览页面,则可以点击两个链接查看差异。