Почему верстка отличается на реальном устройстве iphone(se)?

Question

[postya]

Сделал верстку, в браузере в developer tools на разрешении 320 px для iphone se
Верстка выглядит нормально, а вот на реальном устройстве (iphone se) один элемент(знак доллара) съехал
Почему так происходит?

Браузер:



Реальное устройстов Iphone SE:



Элемент:

.price > span {
  position: absolute;
  transform: translateX(-0.7em);
  -webkit-transform: translateX(-0.7em);
  font-size: 2.3rem;
  font-weight: 600;
  color: var(--active);
}

Answer 1

[cryptodust]

Вопрос древний, но думаю подобные проблемы продолжают возникать у верстальщиков.

Весьма вероятно это связано с тем что у iPhone, насколько я знаю, расчет идет не в физических пикселях, а в двое меньших виртуальных. em - относительная единица, её размер формируется относительно текущего или унаследованного размера шрифта (font-size). 1em равен значению font-size. Размер font-size задается в пикселях(или в относительных величинах которые по итогу все равно отсчитываются от значения в пикселях).

Надеюсь ответ поможет кому-то, если ответ не верный, поправьте дурака)