How to begin to reduce the website when width is less than 480 pixels?

Hello. Coded the desktop site took adaptiv. Look at the layout to 480 pixels, everything is normal. And for 320 just all proportionally reduced through transformation. How to make so that when you reduce the browser window to 480 pixels, the more everything starts to decrease up to 320, and then appears scrolling. Tried to do this:

var width = $(window).width();
var content = ";
var viewport = $('head meta[name="viewport"]')

if (width <= 479) {
 content = '<meta name="viewport" content="width=device-width, initial-scale=0.66, maximum-scale=0.66, user-scalable=no">';
} else {
 content = '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">';
}

if (viewport.attr('content') != content)
 viewport.attr('content', content);


But he's just infinitely decreases, increases and all rides, don't understand why.
July 2nd 19 at 17:16
3 answers
July 2nd 19 at 17:18
Adaptiv necessary to do scripts and control viewport and media queries on the styles
And the viewport on the adaptive website should always be
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
But how to do it through media? I don't understand. To change the viewport wrong, I know. - nikita.Stracke commented on July 2nd 19 at 17:21
:
@media only screen and (max-width: 479px) {
 /* here are styles for small screens */
}
- geovanni_Hegmann commented on July 2nd 19 at 17:24
July 2nd 19 at 17:20
Write for these extensions is the following:
@media only screen
and (min-device-width : 320px) 
and (max-device-width : 480px) {
//css code here
}

and no scripts and the more changes vievport

UPD but if you want to plug your site size to 480px, then do a simple min-width: 480px for your website, and then if you reduce the size to 320 will appear just horizontal scrolling when viewing.
No, the layout for the 320 is a copy of the 480, just reduced proportionally. The page is 11K pixels high, change all the size - not very, to put it mildly. For .page set zoom: 0.6, like it became, as it should be. - nikita.Stracke commented on July 2nd 19 at 17:23
: Yes, no matter what copy I wrote to you what's the right thing to do, there are accepted rules of adaptation. And Yes zoom is all nonsense - geovanni_Hegmann commented on July 2nd 19 at 17:26
July 2nd 19 at 17:22
Use transform: scale

Something like this, not the fact that works, but I think you get the idea
var scaleWidth = 480;
var width = window.innerWidth;
if (width < scaleWidth)
{
 var scale = width / scaleWidth;
 document.body.style.transform = "scale(" + scale + ")";
}

Find more questions by tags JavaScriptHTMLCSS