Каким образом разрешение экрана экрана в CSS?

Question

Ниже приведены разрешения экрана пары популярных телефонов:

iPhone 6: 1334 х 750

Samsung Galaxy S5: 1920х1080

В CSS есть запросы средств массовой информации, как:

@media only screen (max-width:600px)

, который предназначен для небольших экранов, и два вышеупомянутых телефона все еще реагируют на это? Очевидно, что их ширина намного больше, чем 600px. Итак, мой вопрос: как это масштабирование происходит, если оно вообще происходит? У меня такое чувство, что мне не хватает фундаментальной концепции CSS.

EDIT: Я понимаю, что @media screen действительно запрашивает размер окна, а не разрешение устройства. Мой вопрос может быть более правильно сформулирован так: «Как размер шкалы окон в телефонных браузерах?»

Answer 1

Мне было интересно то же самое время назад, поэтому я обобщу то, что нашел. Оказалось, что это вполне ответ, поэтому я надеюсь, что это поможет.

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

Пиксельные единицы относятся к разрешению устройства просмотра, то есть чаще всего к компьютеру. Если плотность пикселей устройства вывода сильно отличается от плотности изображения на типичном дисплее компьютера, пользовательский агент должен масштабировать значения пикселей.

Итак, что это значит? Пиксель CSS стал сеткой, которая отделена от фактического пикселя.И что мы должны установить плотность пикселей на значение, которое даст понять, какой размер экрана мы смотрим, не имеет значения количества пикселей, которые у нас на самом деле есть. Как веб-разработчик, поэтому мы устанавливаем viewport, который устанавливает относительную сетку, деля количество пикселей на плотность пикселей. Таким образом, устройство с шириной 640 пикселей и плотностью 2,0 пикселя отобразит экран шириной 320 пикселей.

Что теперь?

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

Другой вариант - игнорировать это и начать конструктивно реагировать. У вас есть два, три или четыре размера экрана, по которым вы хотите, чтобы ваша планировка изменилась и придерживалась этого. Проведите некоторое исследование, если вам нужно для определенных размеров экрана (например: хотите ли вы, чтобы пейзаж ipad был вашей обычной веб-страницей?) И оттуда.

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

Дальнейшего чтение

• А (не исчерпывающий) перечень соотношение устройства пикселей можно найти на сайте http://www.devicepixelratio.com/
• Apple, размеры экрана устройства на http://stephen.io/mediaqueries/
• Четкой статью о нем можно найти на gamon.org.

Answer 2

Я считаю, что вам нужно прочитать this ...

и даже больше, когда дело доходит до scalling и Pixel игры, прочитать A Pixel Is not Pixel

Как отрывок/Поинт Вдумайтесь

Для страниц, которые устанавливают начальный или максимальный масштаб, это означает, что свойство width фактически переводит в минимальную ширину видового экрана. Например, для , если ваш макет должен иметь ширину не менее 500 пикселей, тогда вы можете использовать следующую разметку . Когда экран находится более 500 пикселей широкий, браузер будет расширять окно просмотра (а не увеличение), чтобы размеру экрана

также

Однако есть две хитрые биты: запрос медиа-ширины устройства и тег width = "device-width">. Оба работают с пикселями устройства, а не с CSS-пикселями, поскольку они сообщают о контексте веб-страницы и не о его внутренних CSS-функциях.