How to make scale for a certain screen size?

Question

HTML

Hello. Please take a look at my styles:

<link media="screen" href="{THEME}/style/styles.css" type="text/css" rel="stylesheet" /> <!-- Все стили и стили при размере экрана более 1340px  -->
<link rel="stylesheet" media="screen and (min-width: 690px) and (max-width: 999px)" href="{THEME}/style/adap-phone-tablet.css" />
<link rel="stylesheet" media="screen and (min-width: 1000px) and (max-width: 1309px)" href="{THEME}/style/adap-pc-tablet.css" />

I read the documentation on viewport, but did not figure it out. How can I make it so that when the size is from 320px to 689px, the site simply zooms in on the adap-phone-tablet.css style? At the beginning, I tried to separately write a style for sizes 320 and 689, but nothing good came of it, so it's better that the site looks the same at 320 pixels as it does at 690, only it is zoomed in. Tell me how to do this?

Answer 1

Try this script:

<script>
;(function($){
var portraitWidth,landscapeWidth;
$(window).bind("resize", function(){
  if(Math.abs(window.orientation) === 0){
    if(/Android/.test(window.navigator.userAgent)){
      if(!portraitWidth)portraitWidth=$(window).width();
    }else{
      portraitWidth=$(window).width();
    }
    $("html").css("zoom" , portraitWidth/320 );
  }else{
    if(/Android/.test(window.navigator.userAgent)){
      if(!landscapeWidth)landscapeWidth=$(window).width();
    }else{
      landscapeWidth=$(window).width();
    }
    $("html").css("zoom" , landscapeWidth/320 );
  }
}).trigger("resize");
})(jQuery);
</script>
<script>
$(window).bind('resize load', function(){
    if ($(window).width() >= 320 && $(window).width() <= 689) {
        $("html").css("zoom", $(window).width()/320 );
    } else {
        $("html").css("zoom", 0);
    }
});
</script>

Taken from one of our projects (our designer wrote)