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).