Адаптивный дизайн: iPad 4-го поколения имеет размер 2048px x 1536px, но медиа-запрос активируется на 768px и ниже... Почему?

Question

Я тестирую веб-сайт на iPad 4-го поколения, и его размер в пикселях: 2048px x 1536px, но он активирует мой "мобильный" медиа-запрос (в книжной ориентации), который составляет 768px и ниже, и активирует мой "планшетный" медиа-запрос (в альбомной ориентации), который составляет 769 пикселей и 1024 пикселей.

Мне интересно, почему это происходит?

Я использую этот метатег в голове, и я уверен, что именно поэтому он делает это,

<meta name="viewport" content="width=device-width, initial-scale=1"/>

<link href="mobile.css" type="text/css" rel="stylesheet" media="screen and (min-width: 0) and (max-width: 768px)" />
<link href="tablet.css" type="text/css" rel="stylesheet" media="screen and (min-width: 769px) and (max-width: 1024px)" />

И я не жалуюсь, я думаю, что так и должно быть. Я просто запутался, почему это работает? Что такое магия, которая превращает 1536px в 768px?

Answer 1

IPad и iPhone Retina делают вид, что имеют меньше пикселей, чем на самом деле, потому что в противном случае большинство веб-сайтов были бы нечитаемо маленькими.

Для отображения информации об пикселях CSS необязательно отображается соотношение 1: 1. См. "Пиксель - не пиксель" - не пиксель для получения дополнительной информации по этому вопросу, а документ W3C EM, PX, PT, CM, IN... для более официального источника.