@viewport

已弃用: 不再推荐使用该特性。虽然一些浏览器仍然支持它,但也许已从相关的 web 标准中移除,也许正准备移除或出于兼容性而保留。请尽量不要使用该特性,并更新现有的代码;参见本页面底部的兼容性表格以指导你作出决定。请注意,该特性随时可能无法正常工作。

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

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

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

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

语法

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

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

描述符

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

min-width (en-US)

设置 viewport 的最小宽度

max-width (en-US)

设置 viewport 的最大宽度

width (en-US)

同时设置 min-widthmax-width

min-height (en-US)

设置 viewport 的最小高度

max-height (en-US)

设置 viewport 的最大高度

height (en-US)

同时设置 min-heightmax-height

zoom (en-US)

设置初始缩放系数

min-zoom (en-US)

设置最小缩放系数

max-zoom (en-US)

设置最大缩放系数

user-zoom (en-US)

设置用户是能更改缩放系数

orientation (en-US)

设置文档的方向

viewport-fit (en-US)

Controls the display of the document on non-rectangular displays.

Formal syntax

Error: could not find syntax for this item

Examples

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

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

@viewport {
  orientation: landscape;
}

Specifications

No specification found

No specification data found for css.at-rules.viewport.
Check for problems with this page or contribute a missing spec_url to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility

BCD tables only load in the browser

See also