Отзывчивый дизайн на мобильных телефонах с более высоким разрешением

Question

Насколько я понимаю (исправьте меня, если я ошибаюсь), современный отзывчивый сайт изменится в соответствии с размером и типом устройства, которое вы используете. Или это может быть применено, если изменяется размер окна.

Мой вопрос: почему мой мобильный телефон отображает отзывчивый сайт так же, как его современный монитор 1080p.

По сути, мой текущий монитор работает на 30" и с разрешением 768p. Мой телефон также имеет разрешение 768p.

Многие реагирующие сайты используют медиа-запросы для отображения файла CSS на основе пикселя . ширина

не будет ли это то же самое как для моего монитора и телефона

МОЙ ВОПРОС: Как я могу сделать сайт реагирующий на основе размера экрана (в дюймах, и т.д.), а не разрешение экрана или количество пикселей.

EDIT: мой отзывчивый дизайн имеет 3 уровня CSS для разных ширины пикселей (медиа-запросы). При просмотре на мониторе или смартфоне он отображает более высокий уровень (выше 767p). Как я могу заставить свой смартфон отображать мой низкоуровневый CSS (ниже 480p), хотя на самом деле он имеет больше пикселей.

Answer 1

Я недавно создал веб-сайт с использованием аналогичных технологий http://www.super-rod.tv/ Он предназначен как для ПК, так и для мобильных устройств и будет реагировать на изменение размера динамической ширины браузера. Я использовал медиа-запрос с максимальным листингом от более высокого до нижнего. Для экранов 1080P он имеет лучший полноэкранный режим, а для более крупных, таких как экран 4K, он будет центрирован с фоном текстуры, при более низких значениях, например 768P, он использует меньший набор изображений, а также центрируется, как на экране 4K. Если вы используете таргетинг на мобильные устройства, вы можете использовать ширину устройства вместо этого, здесь см. Здесь width versus device-width Чтобы заставить использовать самый низкий набор CSS, вы можете либо использовать максимальную ширину 1000 пикселей (я не думаю, что те, кто все еще используют 800x600 на ПК была бы ваша цель?), это бы вышло из всех настольных компьютеров, или вы можете использовать браузер UA для определения (определение для всех IE, Safari, FF, Chrome, Opera и т. д., а остальные - мобильные).