Changing viewport/screen width js
Question
I've been trying to build a responsive button on our new website which changes the body width to 460px for example to show what our website looks like on mobile. I've seen this done using iframes as the iframe width sets the viewport width so a button can set a width of the iframe and it will change and look responsive.
I'm trying to do this with vanilla javascript but struggling. I can set the body width no problem, but bootstrap and the css media queries don't respect setting a width as it works off of viewport/screen width which remains the same.
How do I do this? I have a button of a mobile, and a button of a desktop and they should adjust the screens width to mobile/desktop widths and the media queries should respect it.
Is this possible? My viewport is set as:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
and media queries as:
@media screen and (min-width: 992px) {}
1 answers
solution1
0 2020-06-17 01:06:02
If I don't get you wrong about your case, I have 2 recommend for you.
Use function
opento open the new window that is fully loaded in desired width and height. You can take a look at herevar option_string = "location=yes,width=640,scrollbars=yes,status=yes"; var URL = "https://your_link.com"; var win = window.open(URL, "_blank", option_string );Instead of loading your full page, use iframe of page which you want to display and embed, after click
DesktoporMobilebutton, change the width of iframe depend on which button is clicked. Take a look at example below for more details:<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>
Hope it would help
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.