Setting a minimum width to fit on responsive website

Issue

I'm making a fully responsive website but it's really handy to have a min-height of the site set to 480px, instead of "industry standard" 320px. I know meta tag viewport and this pretty much does the job for me on smallest screens:

<meta name="viewport" content="width=480, user-scalable=no">

But this works only for a mobile, any device with screen reporting more than 480px isn't scaled properly. For these, this one works:

<meta name="viewport" content="width=device-width, user-scalable=no">

Is there please a way how to combine both these? Somehow set smallest possible width of the site with no regards to the actual screen size but use any higher value of screen that 480px.

Thanks a lot, Jakub

Solution

Use the latter meta viewport value and simply set the min-width CSS property for the body or your container element to be the 480px value you require and set the width to 100%. The min-width will override the width value (as you would expect) when the 100% width falls below 480px.

I'd strongly recommend that you set box-sizing: border-box so you can add padding to your body or container without exceeding the total 100% screen width.

Please also note that disabling user scaling ("user-scalable=no") is poor user experience for many users, and in particular for those with accessibility needs. I'd suggest you set initial-scale=1 instead. See http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

The final result should look something like this-

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

CSS-

#container {
   -webkit-box-sizing: border-box;
   box-sizing: border-box;
   min-width: 480px;
   padding: 20px;
   width: 100%;
}

Answered By - pwdst