@turbo78

Размеры экранов для адаптивной верстки jQuery?

Приветствую всех, эксперты!

Имеется следующий код для оптимизации адаптивной верстки:
<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>


Необходимо сделать 2 версии сайта - под настольный ПК и для мобильного устройства.
В коде расчет на то, что устройство с шириной экрана менее 600px - мобильное. Однако не все моб устройства попадают в это уточнение.

Какие разрешения экранов используются в современных реалиях и как предпочтительнее использовать этот код для смены между декстоп/мобильной версией?
  • Вопрос задан
  • 493 просмотра
Решения вопроса 2
DevMan
@DevMan
зачем? зачем вам эти костыли?
адаптив прекрасно делается без жс, с помощью цсс.
а если вы хотите разные цсс-файлы под мобильную версию, это делается редиректом на уровне веб-сервера/приложения.
Ответ написан
Комментировать
khegay
@khegay
Founder, Garuna
Не нужно делать это через JS, это можно контролировать с помощью встроенных в браузеры функций. Поддержка отличная

Используйте для этого медиа-запросы
<link media="only screen and (max-device-width: 600px)" href="mobile.css" type="text/css" rel="stylesheet" />
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
vladislav_boychenko
@vladislav_boychenko
Купаюсь в гривнах
Узнавайте не ширину экрана, а мобильный ли браузер
https://developer.mozilla.org/ru/docs/Web/API/Wind...
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы