Screen sizes for jQuery responsive layout?

Question

JavaScript

Hi all experts!

There is the following code to optimize the responsive layout:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready(function(){
    $(window).bind("resize", resizeWindow);
    function resizeWindow(e){
      var newWindowWidth = $(window).width();

      // Если ширина меньше 600 px, используется таблица стилей для мобильного
      if(newWindowWidth < 600){
        $("link[rel=stylesheet]").attr({href : "mobile.css"});
      } else if(newWindowWidth > 600){
        // Если ширина больше 600 px, используется таблица стилей для десктопа
        $("link[rel=stylesheet]").attr({href : "style.css"});
      }
    }
  });
</script>

It is necessary to make 2 versions of the site - for a desktop PC and for a mobile device.
In the code, the calculation is that a device with a screen width of less than 600px is mobile. However, not all mobile devices fall into this clarification.

What screen resolutions are used in modern realities and how is it preferable to use this code to change between desktop / mobile version?

Answer 1

why? why do you need these crutches?
adaptive is perfectly done without js, with the help of css.
and if you want different css files for the mobile version, this is done by a redirect at the web server/application level.

Answer 2

Find out not the width of the screen, but whether the browser is mobile
https://developer.mozilla.org/en/docs/Web/API/Wind...