Why is the layout different on the real iphone(se)?

Question

iOS

I did the layout, in the browser in developer tools at a resolution of 320 px for iphone se
The layout looks normal, but on a real device (iphone se) one element (dollar sign) moved
out Why is this happening?

Browser:



Real Devices Iphone SE:



Item:

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