我一直在尝试在我们的新网站上建立一个响应式按钮，例如，将主体宽度更改为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) {}
[如果我对您的案件没有错，我给您2条建议。
使用功能open打开以所需宽度和高度完全加载的新窗口。您可以看一下here
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>
希望有帮助