Как настроить стили под отдельно под смартфон, и отдельно под компьютер?

Question

[Лоло]

Здравствуйте, проблема в чем: я раньше использовал для смартфонов отдельные стили с помощью @media screen and (max-device-width: 1040px) { , но как вы понимаете, этот кодец не полноценно исполняет поставленную задачу, т.к. если пользователь окажется на сайте со старым монитором меньше 1440px, то у него отображаться будет моб.версия сайта.
Спасибо!)

Comments

[Ankhena]

т.к. если пользователь окажется на сайте со старым монитором меньше 1440px

Ну увидит он планшетную версию и что?
И не device-width, а просто min-width

Гуглите скрипты определяющие устройства, если так приспичило.

[historydev]

Ankhena, я не считаю девайсы больше 1к ширины планшетами и тупа показываю пк версию

[Ankhena]

Владимир, ну так и поделитесь ссылкой на скрипт с человеком, раз он у вас под рукой.

[Ankhena]

Lolo Pingvin
и еще я думаю, что вы путаете размер девайса и размер его вьюпорта.
https://www.esolutions.se/en-GB/test

[historydev]

Ankhena, нет-нет, по ширине окна меряю

[Ankhena]

Владимир, ну т.е. наоборот, на планшетах показываете ПК версию?
Я бы в таком случае делала бы больше брейкпоинтов. Дизайнеры всё чаще рисуют десктопы от 1300-1440.

[historydev]

Ankhena, я беру всё выше 1000-1200 и вывожу пк компоненты

Answer 1

[Den Sabrov]

Возможно, более точное указание брейкпоинтов решит этоу проблему.

Наиболее типичные:

• Min-width: 320px (smaller phone viewpoints)
  
• Min-width: 480px (small devices and most phones)
  
• Min-width: 768px (most tablets)
  
• Min-width: 992px (smaller desktop viewpoints)
  
• Min-width: 1200px (large devices and wide screens)
  

Comments

[Лоло]

а как же новые девайсы, ведь ох ширина сплошь более 1400px ?

[pereyaslavskiy]

Lolo Pingvin Так добавляйте те размеры для медиазапросов, которые вам нужны по макету. Или мы должны вместо вас знать какой у вас макет, и где должны быть переходы?

[frontend queen]

Lolo Pingvin, гораздо мощнее медиазапросов резиновость сама по себе
больше работайте с относительными единицами

[Den Sabrov]

Lolo Pingvin, более 1400рх? Например?
Возможно, Вы путаете с разрешением экрана без учёта dpi.

Например,
iPhone XS Max

/* 2688x1242px at 458ppi */
media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3)