@viewport

已废弃

该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

 @viewport 规则让我们可以对文档的大小进行设置 viewport 。这个特性主要被用于移动设备,但是也可以用在支持类似“固定到边缘”等特性的桌面浏览器,如微软的Edge。

按百分比计算尺寸的时候,就是参照的初始视口(viewport)。初始视口指的是任何用户代理和样式对它进行修改之前的视口。桌面浏览器如果不是全屏模式的话,一般是基于窗口大小。

在移动设备上(或者桌面浏览器的全屏模式),初始视口通常就是应用程序可以使用的屏幕部分。它可能是全屏或者减去由操作系统或者其它应用程序所占用的部分(例如状态栏)。

@viewport {
  width: 100vw; /*将视口宽度设为与设备宽度相同*/
}

语法

@规则包含一组包含在CSS代码块中的嵌套的 descriptor

缩放因子1.0 或者 100% 表示不缩放,大于1表示放大,小于1表示缩小。

描述符

目前,大多数浏览器对 @viewport 的支持很差,Internet Explorer和Edge对其支持较好。但即使在这些浏览器中,也只有少量的描述符可用。如果浏览器不支持 @viewport,浏览器会忽略 @viewport 以及任何和其相关的描述符。

min-width
设置viewport的最小宽度
max-width
设置viewport的最大宽度
width
同时设置 min-widthmax-width
min-height
设置viewport的最小高度
max-height
设置viewport的最大高度
height
同时设置 min-heightmax-height
zoom
设置初始缩放系数
min-zoom
设置最小缩放系数
max-zoom
设置最大缩放系数
user-zoom
设置用户是能更改缩放系数
orientation
设置文档的方向
viewport-fit
Controls the display of the document on non-rectangular displays.

Formal syntax

@viewport {
  <group-rule-body>
}

Examples

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: landscape;
}

Specifications

Specification Status Comment
CSS Round Display Level 1
@viewport
Working Draft Defined the viewport-fit descriptor.
CSS Device Adaptation
@viewport
Working Draft Initial definition

Browser compatibility

BCD tables only load in the browser

See also