元视口对媒体查询没有影响

Question

我正在尝试编写一个功能，使用户可以在移动和桌面布局之间切换。我正在使用媒体查询来区分布局：

@media screen and (max-width: 1024px) {
    .... some definitions
}

我的理解是，VIEWPORT META标签应该影响媒体查询。所以，我想这个

<meta name="viewport" content="width=640" />

应该对我的病情做出积极的评价

@media screen and (max-width: 1024px)

不幸的是，事实并非如此。我错了吗？如果是，有没有办法，如何影响媒体查询？

Answer 1

  

我的理解是，VIEWPORT META标签应该影响媒体查询。

仅限支持它的浏览器。桌面浏览器通常不会。

如果您想允许桌面浏览器使用CSS，通常只需要较小的屏幕，那么最好的办法是使用两个单独的<link>元素并使用media属性指定媒体查询。然后使用JavaScript更改媒体查询以匹配显示（而不是显示以匹配媒体查询）。