@viewport
@viewport 在规则中包含一组嵌套描述符，在由花括号限定的CSS块。这些描述符控制视口设置，主要在移动设备上。
@viewport {
width: device-width;
}语法
一个缩放因子的1.0或100%不对应任何缩放。较大的值会放大。较小的值会缩小。
描述符
浏览器会忽略不可识别的描述符。
min-width第一次显示文档时用于确定视口的宽度。
max-width第一次显示文档时用于确定视口的宽度。
width用于设置两者的简写描述符min-width，max-widthmin-height用于在第一次显示文档时确定视口的高度。
max-height在第一次显示文档时用于确定视口的高度。
height用于设置两者的简写描述符min-height并max-heightzoom设置初始缩放因子。
min-zoom设置最小缩放系数。
max-zoom设置最大变焦倍数。
user-zoom控制用户是否应该能够更改缩放比例。
orientation控制文件的方向。
正式语法
@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 |
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
