Why is the Iphone 5s screen width in chrome wider than my 6s when held up to my monitor?

#1

Hey Guy’s I’m doing the media queries for my website right now. I’m currently doing mobile and I’m using chrome’s different presets in the devtools to start out. I know you shouldn’t design around devices but I wanted to see what my website would look like on the 5s and the screen width is huuge. Way bigger than my 6s when held up against the screen? I do have a 25inch monitor. Is this the reason I really need my design to look proportinate on all devices. It would suck to realize I spent all that time designing a proportionate mobile display for an ipad mini

https://jsfiddle.net/r4ptsohe/

#2

Maybe the difference in size on your monitor is related to the difference in screen resolution between the two mobiles. :slight_smile:

Wikipedia has several articles you could find interesting, maybe this: https://en.wikipedia.org/wiki/Pixel_density

2 Likes
#3

I’m on an iPhone 5s at the moment and the screenshot you posted of a 5s display fits my screen perfectly :slight_smile:

As Erik said if you have a 25 inch monitor and you set its resolution to 320px (if that was possible) then your screenshot would be 25 inches wide:)

The device window basically shows you how content will fit at the chosen device’s resolution. It is not meant to match the physical widths of the device in inches or mm.

2 Likes
#4

Oh ok, how were you able to view that on your iphone? I’d like to test it on mine

#5

Not sure what you mean as the image I showed is a screenshot from my iPhone when I opened the screenshot you posted. I’m browsing SitePoint on my iPhone now.

Jsfiddle doesn’t work on small screens so if you want an actual screenshot the site will need to be online. Post the URL and I’ll take a screenshot for you.

#6

I know fiddle doesn’t work on mobile but I see what you mean, you just opened the photo on your phone and zoomed in

1 Like
#7

I didn’t need to zoom as such I just positioned the iPhone depiction centrally on my phone.

#8

what do you mean? Can you explain it like your talking to a neaderthal lol. Cause I clicked on that link with my 6s and I got that whole img and had to zoom.