1

我想根据设备调整视口缩放(初始比例) - 平板电脑放大更大,手机肖像模式缩小。

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

有没有办法通过@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 手机上进行测试。

任何见解都值得赞赏。

谢谢。

4

1 回答 1

0

我认为@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支持文本颜色将导致灰色)

于 2016-04-13T08:44:47.933 回答