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">

Are you trying to set the min-width of content that is on the page you mean? Why not use a media query? — Rchristiani, Nov 02 '12 at 18:40
Related: http://stackoverflow.com/questions/15040408/achieving-min-width-with-viewport-meta-tag — Brendan Long, Dec 06 '16 at 20:58

score 3 · Answer 1 · answered Mar 31 '14 at 17:35

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 -->

score 2 · Accepted Answer · answered Nov 02 '12 at 18:44

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.

gtamborero · Answer 3 · 2016-03-21T23:32:05.647

I tried a lot of codes and achieved some good results doing a sort of realoading the viewport... But, I think that the best way is to create a full-responsive web site (up to 320px ;)

Thats the best aproach:

<script>
//VIEWPORT

function mobileFriendly() {
    setTimeout(function () {
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
            var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width
            var mw = 725; 
            //alert ("width" + ww);
            var ratio = ww / mw; //calculate ratio
            //alert ("ratio: " + ratio);
                if( ratio < 1 ){ //smaller than minimum size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw);
                }else{ //regular size
                    jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww);
                }
            }
        }, 600);
    }
    jQuery( document ).ready( function(){
    mobileFriendly()
    });
    window.addEventListener("orientationchange", mobileFriendly, false);

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport">

score -2 · Answer 4 · answered Apr 24 '13 at 18:14

Your second solution does in fact work -- what you might not have seen is that you have 2 commas after width=device-width, which is probably why you don't have it working. I've copied it and had no problems.

Sometimes fresh eyes does it all.

Edit : However, yes, in your case, a media query is exactly what you need.

score -4 · Answer 5 · answered Jun 19 '13 at 09:18

<script>
        //viewport just for screens under/with 480px width other screen widths show the whole page resized
        if(screen.width <= 480) {
            document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
        //for devices with more and less/equal than 480px width 
        window.onresize = changeViewport;
            function changeViewport(){
                if(screen.width <= 480) {
                    document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} 
                if(screen.width > 480) {
                    document.getElementById("viewport").setAttribute("content", "");}           
                }
    </script>

This kind of JavaScript manipulation of meta works fine based on my experience. — Morio, Aug 04 '17 at 18:00

Set min-width of content with viewport meta tag

5 Answers5