Responsive design - how to set the width of the mobile browser window to be larger than the screen resolution of the device?

Question

css

Need help. The site uses a responsive design. Please tell me how to make sure that on mobile devices, the mobile browser window does not shrink by less than 650px in width, that is, on mobile devices with a resolution of less than 650px in width, the browser shows the site in a resolution of at least 650px. At a resolution of less than 650px, the content of the site is not displayed correctly.

Answer 1

It's impossible. The browser simply cannot show more content than the screen can fit. As an option - set values ​​for sizes less than 650px as a percentage
P.S. <meta name=viewport content="width=650">

Answer 2

1) html, body min-width?
2) viewport: https://developer.mozilla.org/en/docs/Web/CSS/@viewport
css:

body{
  min-width: 650px;
}

in the .html in the "head" add the viewport meta tag with the content width=650
or do a width check like this:
then:

<script>
        window.onload = function () {
            if(screen.width <= 650) {
                var vp = document.getElementById('viewportVal');
                vp.setAttribute('content','width=650');
            }
        }
    </script>

Answer 3

It can be easier. In this case, the viewport will remain mobile, but the content will be 650px wide and will scroll. In my opinion, this is the most convenient solution for correctly displaying non-scalable/non-responsive content blocks on mobile devices.

@media (max-width:650px){
html{
width: 100%;
height: 100%;
overflow-x: hidden;
}
body{
min-width:650px;
overflow:auto;
}
}