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

Question

[turbo78]

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

Имеется следующий код для оптимизации адаптивной верстки:

<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 - мобильное. Однако не все моб устройства попадают в это уточнение.

Какие разрешения экранов используются в современных реалиях и как предпочтительнее использовать этот код для смены между декстоп/мобильной версией?

Answer 1

[DevMan]

зачем? зачем вам эти костыли?
адаптив прекрасно делается без жс, с помощью цсс.
а если вы хотите разные цсс-файлы под мобильную версию, это делается редиректом на уровне веб-сервера/приложения.

Answer 2

[Roman Khegay]

Не нужно делать это через JS, это можно контролировать с помощью встроенных в браузеры функций. Поддержка отличная

Используйте для этого медиа-запросы

<link media="only screen and (max-device-width: 600px)" href="mobile.css" type="text/css" rel="stylesheet" />

Comments

[turbo78]

Добрый день. Опять же 600px на максимальной ширине, айфоны новые те же в разы шире разрешение, правильно понимаю?

iPhone 11 имеет экран IPS с диагональю 6,1″ и разрешением 1792×828

И таких различных устройств куча, я пытался найти некое универсальное решение.

[DevMan]

turbo78, не смотрите на физическое разрешение устройств, это разрешение самого экрана.
но из-за hidpi/retina рабочее разрешение в два раза меньше по каждой стороне.

[turbo78]

DevMan, то есть если брать 2 версии - пк и моб, на какие разрешения ориентироваться?

[DevMan]

turbo78, ну если у яфона разрешение 1792×828, то фактически будет 896х414 (по факту будет меньше из–за тулбаров браузера).

ориентироваться на пк/моб вообще не нужно, нужно ориентироваться только на размер вьюпорта (потому что окно шириной в 400пх я могу иметь и на десктопе).

[turbo78]

DevMan, запутался на самом деле уже. Нужно сделать две версии сайта. Проще будет через css media выставить меньше ширины Х оформление для моб версии, свыше Х рх - настольная? Каким тогда необходимо взять эту ширину Х в 2020 году?

[turbo78]

DevMan, сам сайт сверстан на относительных величинах, в % и vh/vw. Просто в зависимости от моб или настольной версии необходимо выстроить расположение блоков. Вот и интересует как сделать смену версии сайта в зависимости от устройства.

[DevMan]

turbo78, через media queries.
откройте девтулз в хроме, врубите отображение на мобильных устройствах и получите цифры для примера.
единых правил/размеров нет, потому что контент может располагаться по разному.

[Roman Khegay]

turbo78, медиа-запросы не обязательно делать через <link>, их можно подключать внутри css , например:

@media only screen and (max-width: 600px) {
// тут ваш код
}

Ремарка 1:

Лучше не использовать проценты, пиксели, вьюпорты для размеров верстки. Самый оптимальный вариант для размером: rem - это относительная величина, относительно корневого элемента. Обычно это :root и она обычно равна 16px. em не стоит использовать, так как он относителен родительского элемента.

Ремарка 2:

Хорошим тоном является использование готовых фреймворков. Например: bootstrap или bulma. Обычно такие фреймворки включают в себя сброс стандартных стилей браузеров и ОС, адаптивную сетку (для каждой ширины экрана) и наборы элементов (текст, кнопки, таблицы и прочее). Все это хорошо задокументировано.

Ремарка 3:

Для своих проектов, я взял за основу SCSS версию бутстрапа, убрал лишние элементы, оставил миксины (это функции внутри таблицы стилей) и использую их. Самая частый миксин: media-breakpoint - этот миксин автоматически добавляет меди-запрос не в целый код, а к конкретному элементу. Например, мне нужно, чтобы отступы у body для ноутбуков были 1rem, но для 4К были 0 - миксины в этом отлично помогают.

[Roman Khegay]

turbo78, Ну и как я понимаю, вы начали изучать разработку сайтов. Советы для начала:

1) Лучше сразу изучайте препроцессоры. Для HTML - Jade(Haml/Slim), для CSS - Sass/SCSS/Less. Это такие надстройки над "языками", которые упрощают написание кода в 10 раз.

2) Используйте IDE: Webstorm (но он платный), Atom (но он не совсем IDE, а скорее улучшенный текстовый редактор, хотя его можно раскачать до IDE), Sublime (он тоже как бы платный), VS Code (бесплатный и довольно сильный). IDE будет помогать вам отслеживать и дебажить ошибки, будет автоматически подставлять модули, подсвечивать синтаксис и ещё куча вещей.

3) Используйте сборщики, для старта можно Parcel, потом можно переходить на Gulp/Webpack отдельно. Сборщики проектов будут компилировать ваш SCSS (например) в CSS, при этом с помощью autporefixer будут автоматически расставляться префиксы для всех браузеров (некоторые аттрибуты css имеют разное значение в разных браузерах).

4) Вместо JavaScript, используйте TypeScript, он более понятен для новичка, имеет встроенный линтер (это такой проверщик вашего кода), плюс требователен к типизации.

5) Используйте node.js и пакетные менеджеры - npm или yarn. Они помогут вам в подключении сторонних библиотек (например, jQuery), в их обновлении и отслеживании. В последующем, их не всегда лучше использовать для продакшн-версий проектов, иногда стоит подключать библиотеки через script теги в угоду скорости загрузки (но об этом пока не нужно думать)

Answer 3

[Владислав Бойченко]

Узнавайте не ширину экрана, а мобильный ли браузер
https://developer.mozilla.org/ru/docs/Web/API/Wind...

Comments

[turbo78]

что имеете ввиду?

[anakondoz]

turbo78, Что по user agenty узнают десктоп или мобила
window.navigator.userAgent -> Mozilla/5.0 (Windows NT 10.0; Win64; x64) тут ясно что это винда 10

[Владислав Бойченко]

anakondoz, просто погуглите в эту сторону. Там можно не только браузер узнать, но и ОС. От этого и пляшите — определяете андроид/айфон и подключает стили для мобил.

[turbo78]

Владислав Бойченко, спасибо, немного разобрался, в консоль вывожу device.type

Получается в консоли Mobile/Dekstop

Теперь встрял на том, как переключать эти файлы на чистом js

<head>
		<link rel="stylesheet" href="style.css" type="text/css">
		<link rel="stylesheet" href="mobile.css" type="text/css">
	</head>