Как определить разрешение/размер экрана?

Question

[Одиночка Айс]

Итак, суть такова: пришел Клиент с устройством Xiaomi Mi6 и показывает косяки в адаптивной версии. Судя по отображению, адаптивная версия для ширины в 360 пикселей, но разрешение экрана у данной модели Full HD (1920x1080). И как вообще определять какую версию адаптивы показывают современные устройства?

P. S. Диагональ данного смартфона 5.15 дюймов, может от нее отталкиваться?

Comments

[gleendo]

viewport указали?

[Одиночка Айс]

iamevg_, ну как бы да, иначе Клиент полный сайт увидел бы))

[gleendo]

Одиночка Айс,

для ширины в 360 пикселей, но разрешение экрана у данной модели Full HD (1920x1080).

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

[Roman]

Answer 1

[Николай Шабалин]

Почитайте - https://habrahabr.ru/post/237931/
очень полезная статья, думаю ответит на ваш вопрос.

Comments

[Одиночка Айс]

А можно без умных статей? Саму суть? Мне типа разрешения таких телефонов на 4 делить или что?

[Николай Шабалин]

Одиночка Айс, нет, нельзя, к сожалению. Это не заумная статья как Вам показалось. В ней как раз всё разжевано.

Вот у Вас есть два устройства по 5,5" каждое, только одно 1920*1080, а другое 4к. Вы что разный css будет писать? Я так думаю, что нет и не особо хотите.

[Одиночка Айс]

Николай Шабалин, ииии? как мне узнать под какой размер оптимизировать их? Статью прочитал, для общего развития, но нихрена не понял, как узнать что фулл хд преобразуется в 360 или 320 на мобильнике.

[Николай Шабалин]

Одиночка Айс, всё зависит от плотности и диагонали устройств. Заранее не известно для кого устройства Вы верстаете. Поэтому верстайте отзывчиво. Пускай ваш интерфейс тянется. Если Вы сверстали блок в 360px, а смотрите на устройстве где 320px, то он не поместится. Сверстайте его шириной 100%.
На планшетах переиграйте и можете уже 360px указать. Я не знаю, чем вам ещё помочь.

[Одиночка Айс]

Николай Шабалин, при верстке под моб устройства, я и так сразу 100% для контейнера указываю, просто вопрос в том, как пересчитать эти самые фулл хд на смартфоне в более адекватные значения.

Answer 2

[Ankhena]

Откройте со смартфона https://www.esolutions.se/en-GB/test

Comments

[Одиночка Айс]

С клиентского?)) Хотя за ссылку спасибо, обязательно попробую

[Ankhena]

Одиночка Айс, что мешает попросить клиента сделать скрин?
Но сначала можно со своего, для осознания разницы вьюпорта и разрешения устройства.

Answer 3

[Евгений]

Суть в плотности пикселей. тотже айфон 5 - 1136 x 640 пикселей, 326 пикселей на дюйм - это означает, что в том-же хром дев-тулс будет указываться как 320 пикселей, но по факту, на самом айфоне будет 640 пикселей из-за двойной, по отношению к обычному монитору, плотности пикселей...

к сожалению придется почитать статью указанную Николаем))

Answer 4

[Дмитрий Pacification]

Вариант джаваскриптом определять не подходит?
screen.width

Comments

[Одиночка Айс]

Я же не буду каждого клиента просить запустить сайт и посмотреть цыферки, которые вылезли на его сайте