@viewport
@viewport
@viewport 在规则中包含一组嵌套描述符，在由花括号限定的CSS块。这些描述符控制视口设置，主要在移动设备上。
@viewport {
width: device-width;
}
语法
一个缩放因子的1.0或100%不对应任何缩放。较大的值会放大。较小的值会缩小。
描述符
浏览器会忽略不可识别的描述符。
min-width第一次显示文档时用于确定视口的宽度。
正式语法
@viewport {
<group-rule-body>
}
示例
@viewport {
min-width: 640px;
max-width: 800px;
}
@viewport {
zoom: 0.75;
min-zoom: 0.5;
max-zoom: 0.9;
}
@viewport {
orientation: landscape;
}
规范
| Specification | Status | Comment |
|---|---|---|
| CSS Device AdaptationThe definition of '@viewport' in that specification. | Working Draft | Initial definition |
浏览器兼容性
| Feature | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 29 (behind a flag) 4 | (Yes) | No support 2 | 10 -ms | 11.10 Removed in 15 Reintroduced behind a flag in 16 | No support 3 |
| Feature | Android | Chrome for Android | Edge | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|---|
| Basic support | 4.4 | 29 | (Yes) | No support 2 | 10-ms1 | 11.10 Removed in 15 Reintroduced behind a flag in 16 | No support 3 |
