@media 查询和 @viewport 缩放

Question

我想根据设备调整视口缩放（初始缩放） - 平板电脑放大较大，手机纵向模式放大较小。

我可以通过 index.html 中的<meta name="viewport"... 控制缩放，但这并不特定于每个设备。

有没有办法通过@media 查询来控制缩放？？

它们似乎没有效果。

我有以下css：

@media (min-width: 320px) {
  @viewport {
    width: device-width;
    zoom: 0.7;
  }
}

@media (min-width: 480px) {
  @viewport {
    width: device-width;
    zoom: 0.8;
  }
}

@media (min-width: 801px) {
  @viewport {
    width: device-width;
    zoom: 1.0;
  }
}

我的理解是第一个（320px）应该是手机竖屏，第二个应该是平板竖屏，第三个应该是平板横屏。

无论哪种情况，结果都不会改变。

我正在三星 Galaxy Tab E 和 htc M8 One 手机上进行测试。

感谢任何见解。

谢谢。

Answer 1

我认为大多数浏览器仍然不支持@viewport，它是处于初始定义状态的工作草案规范。

不确定它是否有帮助，但您仍然可以在没有 @viewport 的情况下使用缩放

@media (min-width: 320px) {
  * { zoom: 0.7;}
}

@media (min-width: 480px) {
  * { zoom: 0.8; }
}

@media (min-width: 801px) {
   * { zoom: 1.0;}      
}

这是我用来测试它的小提琴：https://jsfiddle.net/hw0xa1x8/1/（请注意，如果支持@viewport，文本颜色将变为灰色）