Set min-width of content with viewport meta tag

Question

I need to set the min width of content to 480px so that anyone viewing on a screen <= to that will have to scroll accross to view the content. The reason being for this is that it is impossible to make the layout work below this resolution.

Here's what I have

<meta name="viewport" content="width=device-width,  initial-scale=1, maximum-scale=1, minimum-scale=1">

I need something like this but obviously this doesn't work

<meta name="viewport" content="width=device-width,, min-width=480px,  initial-scale=1, maximum-scale=1, minimum-scale=1">

Answer 1

This is a solution to have the responsive version of a web only for tablet and desktop.

This this code we disable the mobile version dynamically. On mobile:

<!-- Meta Responsive -->
<meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function () {
    if(screen.width <= 767) {
        var mvp = document.getElementById('myViewport');
        mvp.setAttribute('content','width=767');
    }
}
</script>
<!-- End of Meta Responsive -->

Answer 2

It sounds like you are trying to set the min width of the content on the page, not the viewport itself.This article might help you out.

You are probably looking to do:

@media all and (max-width: 480px) {
    // styles assigned when width is smaller than 480px;

}

Something like this, in that block you can sent the styles for content on screens that have a width of 480px and lower.

Hope that is what you are looking for.