I have the following in my html header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
…and the web app I’m developing (with React as the view layer) looks fine in the device simulators in Chrome, Safari, Firefox, etc. But when I load it on an actual iPhone, or in the Xcode iPhone simulator, all the fonts seem to be about twice the size.
Has anyone else experienced this?
May be silly question, but have you changed Text Size in your iOS settings or changed Display to Zoomed?
@skirunman Thanks for your input. Now that I’ve had a few days to think about it, and revisiting the situation after receiving your post, I see that I wasn’t interpreting what was happening correctly. The fonts aren’t 2x bigger. It’s that the real estate on the iPhone is partly taken up by Safari controls (URL bar etc.) at the top and bottom of the screen, reducing the screen real estate from what is available in Chrome dev tools iPhone simulator. I need to redesign my login dialog box for the available screen space.