iPhone 6 is giving a clientWidth that's very different than its screen width and causing my media queries not to work right


If I view this using the iPhone 6/7/8 setting in Chrome DevTools, it displays exactly how I want it to (screenshot: https://i.imgur.com/gmi4dHo.png). Notice that clientWidth and screen.width are the same.

But if I view it on my actual iPhone 6, the page renders larger than the viewport and I have to swipe left to see the rest (screenshot: https://i.imgur.com/TcH3e4E.png).

Notice that even though the screen width is only 375, the clientWidth is at 569. I have a media query set to change certain styles below 400, and I believe this inflated clientWidth is keeping that media query from firing.

I’ve already included <meta name="viewport" content="width=device-width, initial-scale=1"> in the header.

Any idea why this is happening?

(I only own this one physical phone, so I haven’t been able to test on any others).

Higher pixel density, you need to take into account retina and other high pixel ratio devices. Like if the screen width is 200 but the pixel density is 1.25, then number of pixels is 250

Edit: sorry, reading that back makes it seem like you have to figure out the maths or whatever yourself; you don’t, have a look for docs on media queries, there are more options than just width.



Thanks for responding! The second link is giving me the following message, “CodePen requires a referrer to render this. Your browser isn’t sending one.”

I kind of vaguely get what the first link is saying, but not enough to know how to apply it to my situation.

I made this much simpler pen today to further test. As expected, those divs show up yellow when I open that one on my iPhone, and the client width displays as 375. So in simple cases like that, it seems that the iPhone 6 does display at 375px wide as you would expect.

The only other thing I can think of is that some of the flexbox stuff I’m doing in the OP pen is causing the issue, but I can’t figure it out.

Try that one. The problem is in the URL: fullpage doesn’t work, but full should.

Lol. Nice pen. At the time I made mine, I only knew bootstrap (using the main site). Now thanks to the Beta, I can follow your logic. Sounds like you might have an issue a viewport meta tag. I like the second one from css tricks. I am on a train, not at home now. If you’re still having the problem tomorrow, I can take a look then.

I actually just discovered CodePen’s debug view (which as far as I understand removes all CodePen code and only displays the author’s code). When I look at it in debug view on my iPhone, it displays exactly how I want and expect! It’s only when viewing it as a regular full page CodePen thingy on iPhone that I have the problem. So I guess it must be some combination of CodePen, flexbox, and iPhone (or maybe all mobile, haven’t tried on anything else). When I take away any one of those elements, it works. But when all three are in play, that’s when I get the problem. I now feel fairly confident that the issue isn’t with my code (at least not by itself), so I can live with that as a victory for now.

Thanks so much for taking the time to respond and help out though!

1 Like