Как соотносятся разрешение монитора и разрешение экрана телефона?

Question

[EvgMul]

Здравствуйте.
Суть вопроса в следующем. Когда верстаю адаптивную страницу, то проверяю её адаптивность с помощью панели разработчика в браузере. Так вот в нем можно задать разрешение устройства и посмотреть, как страница будет выглядеть на устройствах разного разрешения.
Но, к примеру, на моем смартфоне ширина экрана 720px. Задаю это разрешение в браузере, все выглядит хорошо. Смотрю на смартфоне, внешний вид сайта такой, как если бы я задал разрешение в браузере 420px.
Понимаю, что вопрос для знающих людей скорей всего очень глупый, но так или иначе он есть.
Скажите пожалуйста, почему так происходит и можно ли это исправить? Либо, скорее всего, я что-то не правильно понимаю.
Заранее благодарен всем отозвавшимся.

Answer 1

[Олег]

Нужно ориентироваться на viewport, а не разрешение экрана.

Answer 2

[Алексей]

Приветствую.
У вас на телефоне очень вероятно "retina" дисплей. И там на каждую точку обычного разрешения задаваемого в css, приходится 2х2 фактического, общая ситуация такая. Но тонкости зависят от устройства.

Вот подробнее (правда там про оптимизацию графики, но и общие данные есть): https://habrahabr.ru/post/150071/

Answer 3

[Ankhena]

Пооткрывайте https://www.esolutions.se/en-GB/test с разных устройств :)
Viewport не равен разрешению экрана из характеристик устройств.