如何強制桌面瀏覽器使用專為移動設備設計的媒體查詢？

Question

我已經看到一堆堆棧溢出問題的答案解決了在移動設備上顯示桌面版本的問題，但我試圖發現如何強制瀏覽器在桌面上呈現網站的移動版本。

但是桌面版本是否有一些等價物，以便我可以“欺騙”瀏覽器使用媒體查詢來獲得更小的設備寬度？ 本質上是將移動版 css 加載到桌面版。

本質上，我試圖添加一個切換按鈕，單擊該按鈕后，我的頁面就好像它是移動的一樣。 我知道您可以使用 chrome 工具實現這種效果，但我想構建該功能，並且正在努力弄清楚如何告訴瀏覽器表現得好像視口是移動大小的一樣。

謝謝！

Answer 1

如果你的 CSS 媒體查詢在桌面上不能正常工作，你可能錯過了

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

如果它們工作正常但您希望您的網站在移動和桌面上具有相同的視圖，那么您為什么要使用媒體查詢呢？

刪除它們，您的 CSS 將同樣適用於所有尺寸

Answer 2

在您的手機上加載該網站，記下 url。如果它有一個“/m”，例如“https://www.example.com/m”，則將其原樣包含在您的桌面瀏覽器和將加載移動版本。 這個對我有用。