Почему эмулятор Google Chrome показывает iPhone 6 с разрешением 375x667?

Я пытаюсь программно адаптировать размеры моего сайта для разных устройств. Но теперь у меня возникают проблемы с тем, какие размеры мне действительно нужны. В эмуляторе Google Chrome я вижу, что некоторые из моих изображений выросли, например. на iPhone 6 от 230x230 до 357x357. Изображение занимает почти всю ширину эмулируемого экрана и выглядит чуть-чуть ухудшенным, предполагая, что ширина iPhone 6 не намного больше 357 пикселей.

Но Apple говорит, что iPhone 6 имеет разрешение 750x1334! Если бы это было так, изображение должно выглядеть намного хуже, я бы подумал.

Я также нашел некоторую противоречивую информацию о iPhone 4.

Этот сайт рассказывает об iPhone 4 на 640x960 пикселей. Эмулятор Chrome снова показывает его в половине этих размеров 320x480.

qaru.site/info/415748/... говорится, что "экран iPhone - 320x480 определенно".

Что мне здесь не хватает? Почему некоторые источники (в том числе Apple) поставляют размеры, которые в два раза превышают то, что говорит эмулятор Chrome (и мои изображения)?

Ответы

Ответ 1

Расслабься, ты собираешься понять этот беспорядок. Просто обратите внимание, что 2 * 375x667 = 750x1334.

Пиксель не является пикселем

Главное: один пиксель устройства отличается от одного CSS-пикселя.

Они одинаковы для устройств с низкой плотностью пикселей, таких как экран вашего компьютера (96 точек на дюйм). Однако устройства с высокой емкостью пикселей, такие как смартфоны и принтеры (более 160 точек на дюйм), пытаются подчиниться общей спецификации W3C CSS3, понимающей, что один пиксель CSS всегда должен быть близко к 1/96 дюйма (или 0,26 мм), если смотреть с обычного расстояния (длина руки).

Они не подчиняются спецификации букве, так как это означает, что 1px является ровно 1/96th одного реального дюйма в высоких настройках DPI, который никогда не реализовывался ни в одном браузер AFAIK. Тем не менее, они пытаются сделать свои пиксели CSS не столь незначительными, несмотря на очень высокую плотность пикселей, сделав один пиксель CSS равным двум или более пикселям устройства.

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

Если вы не заметили, изображение, показанное выше, показывает, что режим устройства Chrome показывает масштаб устройства (количество пикселей устройства равно одному пикселу CSS).

Фиксация разрешения изображения

Как вы уже знаете, это негативно влияет на изображения, так как браузер также масштабирует изображение. Изображение размером 230x230 CSS пикселей становится 460x460 пикселями устройства, используя то же качество. Чтобы исправить это, использовать атрибут srcset, чтобы дать ссылку браузера различным файлам разрешения того же изображения.

Пример (адаптирован по ссылке выше):

<img src="wolf-400.jpg" srcset="wolf-400.jpg 400w, wolf-800.jpg 800w, wolf-1600.jpg 1600w">

iPhone 6 посмотрит на это и подумает: "О, я притворяюсь 375px широким, но на самом деле я 750px, поэтому я загружу wolf-800.jpg."

Не забудьте использовать src="" для совместимости. Кроме того, если вы не используете sizes="", браузер по умолчанию будет использовать всю ширину устройства.