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

【问题标题】：HTML - Switch Desktop and Mobile view is not working on browser resizeHTML - 切换桌面和移动视图不适用于浏览器调整大小
【发布时间】：2019-04-24 14:25:55
【问题描述】：

我有一个允许在移动/桌面视图之间切换的网页。我使用下面的代码在桌面和移动布局之间切换。

$('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 设备模拟器模式下完美运行。但是，如果我禁用设备模拟器并将桌面大小调整为移动宽度并尝试切换，它不起作用。但是视口内容属性会根据切换代码发生变化。

更新：

响应式设计在移动设备中完美运行（例如，当宽度
响应式设计在桌面浏览器中完美运行（当宽度调整为

【问题讨论】：

你试过initial-scale=1.0吗？如果使用 Bootstrap，为什么要使用两种不同的布局？
您尝试使用 .resize()。或尝试在 .resize() 中调用相同的代码。
是的，我在 resize() 中调用了相同的代码。

标签： html css twitter-bootstrap-3 responsive-design toggle

【解决方案1】：

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

【讨论】：

对不起，我不明白。用这个做什么？

【解决方案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

【讨论】：