如何强制桌面浏览器使用专为移动设备设计的媒体查询？

Question

我已经看到一堆堆栈溢出问题的答案解决了在移动设备上显示桌面版本的问题，但我试图发现如何强制浏览器在桌面上呈现网站的移动版本。

但是桌面版本是否有一些等价物，以便我可以“欺骗”浏览器使用媒体查询来获得更小的设备宽度？ 本质上是将移动版 css 加载到桌面版。

本质上，我试图添加一个切换按钮，单击该按钮后，我的页面就好像它是移动的一样。 我知道您可以使用 chrome 工具实现这种效果，但我想构建该功能，并且正在努力弄清楚如何告诉浏览器表现得好像视口是移动大小的一样。

谢谢！

Answer 1

如果你的 CSS 媒体查询在桌面上不能正常工作，你可能错过了

<meta name='viewport' content='width=device-width' />

如果它们工作正常但您希望您的网站在移动和桌面上具有相同的视图，那么您为什么要使用媒体查询呢？

删除它们，您的 CSS 将同样适用于所有尺寸

Answer 2

在您的手机上加载该网站，记下 url。如果它有一个“/m”，例如“https://www.example.com/m”，则将其原样包含在您的桌面浏览器和将加载移动版本。 这个对我有用。