CSS @viewport不工作

Question

我有一个网站，有一个移动视口宽度480 of。我可以在移动设备上强制这样做，只需添加元标记：

<meta name="viewport" content="width=480">
<meta name="MobileOptimized" content="480">

但这意味着平板电脑也显示了这一移动版本。

因此，在本文介绍如何使用CSS @viewport代替上，我删除了老式的元标记，并将它们替换为：

@media (max-width: 980px) {
    @-ms-viewport {
        width: 480px;
    }
    @-o-viewport {
        width: 480px;
    }
    @viewport {
        width: 480px;
    }
}

但该网站并没有在移动设备上被放大。怎么回事？@viewport是否得到广泛支持？

Answer 1

目前，跨浏览器对@viewport的支持并不是很好。

我现在还是坚持用你的元。

此外，您还可以使用JS或Jquery根据站点的宽度更改元数据库。

Answer 2

我和你有同样的问题。

并非所有浏览器都支持CSS文件中的@viewport。

参见MDN的这张兼容性表。

希望这对你有用。