HTML-“切换桌面和移动”视图不适用于调整浏览器大小

Question

我有一个网页，可以在“移动/桌面”视图之间进行切换。我使用下面的代码在桌面和移动版式之间切换。

$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View

$('meta[name="viewport"]').prop('content', 'width=1024');  // Toggle code for Desktop View

以上内容在chrome设备模拟器模式下完美运行。但是，如果我禁用设备模拟器并将桌面大小调整为“移动宽度”并尝试切换，则该按钮将无法正常工作。但是视口的内容属性会根据切换代码进行更改。

更新：

1. 响应式设计在移动设备中完美工作（例如，宽度
2. 响应式设计在桌面浏览器中完美工作（当宽度调整为

Answer 1

尝试使用引导媒体查询断点 https://scotch.io/tutorials/default-sizes-for-twitter-bootstraps-media-queries

Answer 2

我在不同的引导程序布局中尝试了相同的代码。结果是一样的。我的代码似乎没有问题。

$('meta[name="viewport"]').prop('content', 'width=device-width, initial-scale=1.0'); // Toggle code for Mobile View

这旨在在移动设备或模拟器上工作。不适用于桌面浏览器。

在浏览器中切换“移动/桌面”视图似乎不是一种选择。

请参考以下答案：set viewport using meta viewport tag for desktop browsers