Разрешение экрана

Экран — это весь монитор. Область просмотра — прямоугольник, в котором рисуется страница, за вычетом вкладок, адресной строки, боковых панелей и полосы прокрутки. CSS-медиазапросы измеряют область просмотра, поэтому проектировать нужно под неё — и именно она меняется, когда вы тянете край окна, а размер экрана остаётся прежним.

Верно и то, и другое, просто в разных единицах. Рекламное число считает физические пиксели устройства; CSS считает CSS-пиксели, и на этом телефоне три пикселя устройства рисуют один CSS-пиксель — плотность равна 3. 1290 ÷ 3 = 430. Медиазапросы, размеры шрифтов и любая длина в вашей таблице стилей работают в CSS-пикселях, поэтому таблица устройств на этой странице приводит именно их.

Потому что точки останова Tailwind — это запросы min-width, а они накладываются друг на друга. При ширине 1400px sm:, md:, lg: и xl: совпадают одновременно — lg:flex и xl:grid не конфликтуют не потому, что первая перестала действовать, а потому что более поздняя выигрывает по порядку в исходнике. Выделенная ячейка — решающий префикс, остальные помечены как пройденные.

Две вещи. Изображения: при плотности 2 для слота шириной 400px нужна картинка 800px, чтобы она выглядела чётко — для этого и существуют srcset и дескриптор 2x. И canvas: задайте атрибуту width значение CSS-ширины, умноженной на плотность, и масштабируйте контекст тем же коэффициентом, иначе всё нарисованное будет размытым.

Потому что большинство экранов не ровно 16:9. Дисплей MacBook 1512×982 сокращается до 756:491 — арифметически верно и совершенно бесполезно. Поэтому страница сначала сопоставляет измеренное соотношение со стандартными с точностью 1,5% и переходит к дроби или десятичной записи, только если ни один стандарт не подходит.