2

Какие вы используете методы при вёрстке под большие экраны. Если с планшетами и смартфонами всё понятно (@media), то как быть с очень большими экранами. Например, fullHD телевизор. В связи с тем, что там крупное "зерно", текст становится трудно читаемым. При этом на мониторе с тем же разрешением, всё выглядит отлично.

Другими словами я хочу, чтобы на FHD телевизоре страница выглядела как на FHD планшете а не FHD мониторе.

2 ответа 2

5

В CSS нет возможности использовать реальные единицы измерения (см, дюймы), только относительные (css-пиксели тоже относительны). Устройства и браузеры ответственны за определение css-вьюпорта таким, чтобы сайт смотрелся на них читабельно. Подробнее об этом - в моем ответе к вопросу "В каких случаях (и где) используются данные единицы измерения CSS - px, CSS px, dip?".

С телевизорами проблема - они неадекватно определяют размер вьюпорта. Например, FullHD телевизор определяет вьюпорт как 1920*1080, хотя, с учетом размера экрана и средней дальностью экрана от зрителя - должен определять вьюпорт в районе 960*540, с плотностью пикселей равным двум.

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

Обычно мы доверяем определение размера вьюпорту устройству, вот таким кодом в <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />

Но на проблемных устройствах нужно корректировать размер вьюпорта самим. Это можно делать в js, таким образом:

document.querySelector('meta[name=viewport]')
        .setAttribute('content', 'width='+width+
                                ',minimum-scale='+min_scale+
                                ',maximum-scale='+max_scale+
                                ',initial-scale='+init_scale);

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

Для этого есть user-agent браузера, и ширина/высота вьюпорта, определяемая устройством. Сопоставляя их, можно пытаться "угадать", какое устройство перед нами, и корректировать размер вьюпорта.

Существует плагин к modernizr - detectizr, призванный проводить эти соответствия за вас, и выдающий на выходе устройство, его модель, браузер и другие характеристики. По ним можно определять проблемные для вашего сайта устройства, и корректировать для них размер вьюпорта, через js.

2

Используйте <link rel="stylesheet" media="tv" href="example.css"> Для определения размера используйте em или % вместо px. Инфо W3. Остальные стили css3 применяйте как обычно.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.