更改视口/屏幕宽度js

Question

我一直在尝试在我们的新网站上构建一个响应式按钮，将主体宽度更改为 460 像素，例如显示我们的网站在移动设备上的外观。 我已经看到使用 iframe 完成此操作，因为 iframe 宽度设置视口宽度，因此按钮可以设置 iframe 的宽度，它会改变并看起来响应。

我正在尝试使用香草 javascript 来做到这一点，但正在苦苦挣扎。 我可以设置正文宽度没问题，但是引导程序和 css 媒体查询不尊重设置宽度，因为它在视口/屏幕宽度的情况下保持不变。

我该怎么做呢？ 我有一个手机按钮和一个桌面按钮，他们应该将屏幕宽度调整为手机/桌面宽度，媒体查询应该尊重它。

这可能吗？ 我的视口设置为：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

和媒体查询为：

@media screen and (min-width: 992px) {}

Answer 1

如果我对您的情况没有误解，我有 2 条推荐给您。

使用 function open打开新的 window 以所需的宽度和高度完全加载。 你可以看看这里

var option_string = "location=yes,width=640,scrollbars=yes,status=yes"; var URL = "https://your_link.com"; var win = window.open(URL, "_blank", option_string );

无需加载整个页面，而是使用要显示和嵌入的页面的 iframe，单击Desktop或Mobile按钮后，根据单击的按钮更改 iframe 的宽度。 请查看下面的示例以获取更多详细信息：

 <body> <iframe id="your_site" src="https://your_link.com"> <button class="btn btn_desktop">Desktop</button> <button class="btn btn_mobile">Mobile</button> <script> var $iframe = document.getElementById('your_site'); var $resize_button = document.getElementByClass('btn'); $resize_button.on('click', function(e){ var $button = e.target; if (button.classList.contains('btn_desktop')) { // bigger your frame $iframe.style.width = '640px'; } else { $iframe.style.width = 'auto'; } }) </script> </body>

希望它会有所帮助

更改视口/屏幕宽度js

问题描述

1 个解决方案

解决方案1
0 2020-06-17 01:06:02

更改视口/屏幕宽度js

问题描述

1 个解决方案

解决方案1 0 2020-06-17 01:06:02

解决方案1
0 2020-06-17 01:06:02