Setting a minimum width to fit on responsive website - css

Question

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

Answer 1

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%;
}

Answer 2

This will limit the mobile version to 520px;
<meta name="viewport" id="vp" content="user-scalable=no, width=520, initial-scale=0.5, maximum-scale=0.5">
<script>
window.onload = function() {
if (screen.width > 520) {
var mvp = document.getElementById('vp');
//mvp.setAttribute('content','');
mvp.setAttribute('content','width=device-width, initial-scale=1');
}
}
</script>

Answer 3

I'm not sure about the answer with container min-width, because Chrome mobile preview not understands it. Adding this hack(jQuery used):
jQuery(function($){
let upgradeViewport = function(){
let viewport = $('meta[name=viewport]');
let viewportMinWidth = parseInt($('head').attr('data-viewport-width'));
if (viewport.attr('content').indexOf('user-scalable=0')!=-1 || viewport.attr('content').indexOf('user-scalable=no')!=-1){
return;
}
if (!upgradeViewport.original) upgradeViewport.original = viewport.attr('content');
if(window.innerWidth <= viewportMinWidth) {
viewport.attr('content', 'width='+viewportMinWidth);
}else{
viewport.attr('content', upgradeViewport.original);
}
};
$(document).ready(upgradeViewport);
$(window).resize(upgradeViewport);
});
will dynamicly change viewport meta tag by the value in attribute data-viewport-width of head . Working fine, also with mobile-previewers.

Answer 4

First thing it is better to go with % rather than fixing the width=480px.(Example:- min-width: 45%). And the screen will automatically adjust itself based on the screen resolution.