Представьте устройства с разрешениями a) 300px x 400px b) 600px X 800px c) 900px x 1000px
Теперь, если создать веб-страницу с div, ширина которой составляет 150 пикселей. Независимо от всех других факторов (включая браузер)
он должен занимать половину ширины в первом устройстве. 1/3 ширины во втором устройстве. 1/4 ширины в третьем устройстве.
Однако абсолютный размер div зависит от размера экрана.
Это было мое предположение. Это было хорошо в нескольких устройствах и перерыве в других. Какого другого аспекта я не вижу?
Рассмотрим старый iphone и iphone с доставкой сетчатки. Старый экран iphone - 320 x 480 пикселей. На iphone с дисплеем сетчатки есть экран 640 x 960 пикселей.
Тем не менее, оба экрана имеют одинаковый физический размер (3,5 дюйма), а квадрат шириной 300 пикселей отображается с одинаковым физическим размером на обоих.
Оба устройства имеют логический размер экрана 320 х 480 точек:
Когда вы устанавливаете width: 150px
150 пикселей, это на самом деле 150 очков.
Коэффициент масштабирования 2 применяется на iphone с дисплеем сетчатки.
Квадрат фактически визуализируется на 300 пикселей в ширину, чтобы соответствовать физическому размеру не-сетчатки.
Плотность пикселей составляет 200% (коэффициент масштабирования - 2), ширина 720, а ширина устройства - 360 (ширина устройства разделена на коэффициент масштабирования => 720/2).