I managed to get a screenshot from the fiddle on my iphone and its showing the red box at 20px top and bottom as I would have expected on my double density display.
is it the same on codepen?
Whereās the codepen version?
14px top on my phone and 20px bottom
that is because that is the wrong one:
7px top
10px bottom.
Fixed: https://jsfiddle.net/jyfhL38q/
10px top
10px bottom.
Here, this is the same thing as codepen: https://jsitor.com/QXSPT70EKJy
also, good on mobile.
17px top
18px bottom.
I am seeing. mobile.
Yes that shows 20px top and bottom on my mobile screenshot.
I think you are just seeing a 1px rounding error on your screenshot depending on the height of the screen and where the element happens to be on your device. You could try drawing loads of different size red boxes and see what you get and whether some are correct and some are not.
I canāt duplicate your error on my device though so I canāt really help but mobiles are prone to lose the odd pixel.
If I add 1px to the top, it goes from 17 to 19 px.
making it 11px. desktop.
I suppose the question is whether its out on the phone as well or just in the screenshot. Can you see by eye that itās different.
What do you see with something like this:
Are they all correct or is there a pattern of errors.
I am seeing this via mobile.
instead of 25 it is 44.
instead of 40 it is 70.
Top:
40: 14px white space down to the border line.
Bottom:
40: 15px white space up to the border line.
According to that screenshot it looks like each value is multiplied by 1.75 and then rounded up or down.
The 27px for example is only showing 47px height as its rounded down from 47.25. That means you will get quite a few discrepancies in your screenshot.
On the other hand my iphone with a double density goes up smoothly at 2 pixels a time.
As I mentioned before it may be that the actual display on your phone looks correct as it is mapping across pixels and anti aliasing but looks out on the screenshot as it has to map to 1px exacty.
What happens when you pinch and zoom can you see the discrepancies?
Visually it looks like one is higher than the other by 1px.
1 Like
The Device Pixel Ratio (DPR) of the Motorola Moto G Pure is ~1.75
What does that tell you?
It tells me that I was exactly right in this thread 
Thatās the reason the screenshot is out but Iām guessing the actual page will not be stepped like that on a mobile screen.
1 Like
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.