@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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@viewportChrome No support 29 — 84
Notes Disabled
No support 29 — 84
Notes Disabled
Notes See Chromium bug 235457.
Disabled From version 29 until version 84 (exclusive): this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Edge Full support 12
Prefixed Disabled
Full support 12
Prefixed Disabled
Prefixed Implemented with the vendor prefix: -ms-
Disabled From version 12: this feature is behind the Enable @-ms-viewport rules preference.
Firefox No support No
Notes
No support No
Notes
Notes See Firefox bug 747754.
IE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Disabled
Full support 16
Disabled
Disabled From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
No support 11.1 — 15
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari No support No
Notes
No support No
Notes
Notes See WebKit bug 95959.
WebView Android No support 4.4 — 37Chrome Android No support 29 — 84
Notes Disabled
No support 29 — 84
Notes Disabled
Notes See Chromium bug 235457.
Disabled From version 29 until version 84 (exclusive): this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
Firefox Android No support No
Notes
No support No
Notes
Notes See Firefox bug 747754.
Opera Android Full support 16
Disabled
Full support 16
Disabled
Disabled From version 16: this feature is behind the --enable-experimental-webkit-features runtime flag and the --enable-viewport runtime flag.
No support 11.1 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS No support No
Notes
No support No
Notes
Notes See WebKit bug 95959.
Samsung Internet Android Full support 2.0
height descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
max-height descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
max-width descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
max-zoom descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16Safari No support NoWebView Android No support NoChrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16Safari iOS No support NoSamsung Internet Android Full support 2.0
min-height descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
min-width descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
min-zoom descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16Safari No support NoWebView Android No support NoChrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16Safari iOS No support NoSamsung Internet Android Full support 2.0
orientation descriptorChrome No support NoEdge No support 12 — 79
Prefixed
No support 12 — 79
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support 11.1 — 14
Prefixed
No support 11.1 — 14
Prefixed
Prefixed Implemented with the vendor prefix: -o-
Safari iOS No support NoSamsung Internet Android No support No
user-zoom descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16Safari No support NoWebView Android No support NoChrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16Safari iOS No support NoSamsung Internet Android Full support 2.0
viewport-fit descriptorChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
width descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 29 — 84Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support 2.0
zoom descriptorChrome No support 29 — 84Edge Full support 12
Prefixed
Full support 12
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Implemented with the vendor prefix: -ms-
Opera Full support 16Safari No support NoWebView Android No support 4.4 — 37Chrome Android No support 61 — 84Firefox Android No support NoOpera Android Full support 16Safari iOS No support NoSamsung Internet Android Full support 8.0

Legend

Full support  
Full support
No support  
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

See also