html - CSS @viewport 不工作

Question

我有一个移动视口(viewport)宽度为 480 像素的网站。我可以通过简单地添加元标记在移动设备上强制执行此操作:

<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)缩放。是什么赋予了？ @viewport 是否得到广泛支持？

Answer 1

目前对 @viewport 的跨浏览器支持还不够好。

我现在会坚持使用您的元数据。

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