Имитация экрана устройства на веб-странице

Question

Я создаю веб-приложение, которое генерирует и обслуживает веб-страницы для мобильных устройств. Например, пользователь настраивает данные для отображения и использует шаблон скорости для создания окончательных файлов HTML/CSS/JS. Когда шаблон и информация для включения настроены, клиенты подключаются к серверу, чтобы показать сгенерированные страницы.

Тем не менее, я сейчас создаю экран предварительного просмотра для этого. Итак, скажем, я хочу посмотреть, как это будет выглядеть, скажем, на Nexus 5.

Моя цель - создать что-то похожее на Google в Chrome - эмуляцию мобильного устройства. Проблема в том, что я не могу понять, как они могут делать такую ​​эмуляцию.

Это правда, что контент должен быть уменьшен, чтобы показать все. Это довольно легко понять, как будто экран не достаточно большой, нам нужно, чтобы он соответствовал.

Итак, я знаю диагональ экрана устройства, его разрешение и PPI (точки на дюйм). Что мне нужно знать, так это как получить правильные измерения для моего веб-сайта, чтобы имитировать устройство. Когда я иду в инструмент эмуляции Chrome, я вижу, что Nexus 5 отображается как:

• Разрешение 360 х 640
• Пиксельное соотношение сторон 3

Я знаю, как они рассчитывают пропорции пикселя: это PPI устройства, деленный на 160 (базовый PPI). Итак, 445 / 160 = ~3 (445 - это плотность пикселей Nexus 5). Вот как они достигли 360 x 640: они делят разрешение на пропорции пикселя (3).

На моем веб-сайте у меня есть iframe и я загружаю сгенерированную страницу в него. Тогда я знаю, что должен применить уровень масштабирования. И в этом проблема. Я действительно не знаю, какое значение увеличения должно быть.

Одна из попыток была

1 / ((диагональ экрана по размеру)/ пропорции пикселя) = 1 / (4,95/3) = 0,6060(60)

Применение этого зума делает его хорошо выглядеть. Если я использую тот же подход с Amazon Kindle HDX, он тоже работает.

Однако, если я пойду с LG L70, я получу следующее:

1 / (4,5 / 1,25) = 0,27777777...

Проблема в том, что применение этого зума будет намного меньше (из-за большого уменьшения) по сравнению с Nexus 5, а в режиме эмуляции Chrome они кажутся одинаковыми.

Пожалуйста, дайте мне знать, если есть какая-то информация, которая может помочь решить эту загадку.

Answer 1

Соотношение сторон пикселя определяет соотношение между шириной и высотой, мерой того, как "квадратные" пиксели находятся на устройстве.

Тем не менее, Google позволяет настроить соотношение пикселей устройства. Это показывает, сколько пикселей устройства отображается на один логический пиксель (1 пиксель в CSS).

Я считаю, что соотношение пикселей устройства - это то, что заставляет различные размеры экрана выглядеть одинаково.

Расчеты плотности, в которых используется коэффициент пикселей устройства для вычисления эффективного масштабирования, могут быть рассчитаны в одном измерении, нет необходимости использовать диагональное измерение.

Рассчитать эффективный css_width на рабочий стол с планшета:

desktop_pixels = tablet_pixels * (desktop_ppi / tablet_ppi) (1)

tablet_pixels = tablet_css_width * tablet_pixel_density

desktop_pixels = desktop_css_width * desktop_pixel_density

в (1)

desktop_css_width * desktop_pixel_density = tablet_css_width * tablet_pixel_density * (desktop_ppi / tablet_ppi)

перестраивать

desktop_css_width = tablet_css_width * (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)

Логический коэффициент увеличения desktop_css_width / tablet_css_width

zoom_factor = (tablet_pixel_density / desktop_pixel_density) * (desktop_ppi / tablet_ppi)