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，则文字颜色会显示为灰色）

@media查询和@viewport缩放

1 个答案: