JavaScript for Altering Viewport/Screen Width

Question

JavaScript for Altering Viewport/Screen Width

Lately, I've been experimenting with creating a responsive button for our new website. The goal is to adjust the body width to 460px, simulating how our site would appear on mobile devices. While researching, I came across a technique that utilizes iframes – by adjusting the iframe width, the viewport width changes accordingly, thus achieving the desired responsiveness effect.

My challenge lies in implementing this using vanilla JavaScript. Although setting the body width is straightforward, Bootstrap and CSS media queries seem to ignore this custom width as they are based on viewport/screen width, which remains constant.

So, the question is: How can I get this to work? I have buttons representing mobile and desktop views, and they should be able to adjust the screen's width dynamically while ensuring that the media queries respond appropriately.

Is there a way to accomplish this? For context, my viewport is defined as:

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

and the media queries are structured like this:

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

javascript html css viewport

Answer 1

Answer №1

Assuming I understand your situation correctly, I have two recommendations for you.

To open a new window that is fully loaded in the desired width and height, you can utilize the open function. You may refer to this link for more information: 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 );

Instead of loading the entire page, consider using an iframe to display the specific page you intend to embed. Upon clicking the Desktop or Mobile button, adjust the width of the iframe accordingly based on the button clicked. Refer to the example below for clarification:

<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')) { // enlarge your frame
                $iframe.style.width = '640px'; 
            } else {
                $iframe.style.width = 'auto';
            }
        })
    </script>
</body>

I hope these suggestions prove helpful to you.

Answer 2

Assuming I understand your situation correctly, I have two recommendations for you.

To open a new window that is fully loaded in the desired width and height, you can utilize the open function. You may refer to this link for more information: 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 );

Instead of loading the entire page, consider using an iframe to display the specific page you intend to embed. Upon clicking the Desktop or Mobile button, adjust the width of the iframe accordingly based on the button clicked. Refer to the example below for clarification:

<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')) { // enlarge your frame
                $iframe.style.width = '640px'; 
            } else {
                $iframe.style.width = 'auto';
            }
        })
    </script>
</body>

I hope these suggestions prove helpful to you.

JavaScript for Altering Viewport/Screen Width

Answer №1

Similar questions

Searching within an Angular component's DOM using JQuery is restricted

Error encountered: Unexpected token '"', expecting "}". Perspective from React : It is an unfortunate occurrence which h

Which is better: triggering mouseleave from inside or outside of mouseenter event

In Vue(tify), transitions require children to have keys, but in this case, there are no tags present as children

Issue with $_SERVER['PHP_SELF'] not functioning properly

Jquery draggable droppable does not support displaying multiple divs simultaneously

Utilizing JavaScript in Protractor, explore a list to identify the selected checkboxes and those that remain unchecked

There appears to be a slight issue with the tailwind dark mode not fully extending when scrolling to the bottom of the page

Using router-links with events: A simple guide

Having an issue with retrieving value from a textfield in JavaScript

Managing the display of my website's screenshots within the list of recently visited sites on the browser's new tab page

The problem with the CSS Grid effect

Creating a responsive table layout with CSS

"Move a div towards the mouse's location by animating it with JavaScript when

Error message: The "spawn" function is not defined and is causing a TypeError to be thrown in

When working with Next.js Components, be aware that using a return statement in a forbidden context can lead to

The image displays successfully on desktop, however, it fails to load once the website is deployed on GitHub or Netlify

Analyze Javascript code and monitor every variable alongside their corresponding values

How can you add draggable functionality to a Bootstrap dropdown menu?

Can you tell me the name of this specific page arrangement style?