CSS @viewport不起作用

Question

我的网站的移动视口宽度为480px。我只需添加元标记即可在移动设备上强制执行此操作：

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

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

所以继续this article on using the CSS @viewport instead后，我删除了旧式元标记，并将其替换为：

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

但该网站并未在移动设备上放大视口。是什么赋予了？ @viewport被广泛支持吗？

Answer 1

我和你有同样的问题。

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

请参阅MDN的this table of compatibilities。

希望对你有用。

Answer 2

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

我现在坚持使用你的meta。

您也可以使用JS或Jquery根据站点宽度更改元标记。