0

I am developing a site which is to also run on mobile devices. I have an issue with both Chrome and Safari on my iPhone 13 Pro Max, iOS 16.2.

The problem is that when I launch my dialog to log in, the content appears to "grow" horizontally, causing what appears to be a "zoom". I have checked every CSS element in my app, and I cannot see anywhere I'm specifying a min-width or anything of that sort that might cause this. Can someone help me pinpoint the issue? Or point me to a resource that can help alleviate this problem?

My site is live here: https://chonk.jambudipa.io

Here is how it looks when you launch the dialog by clicking on "Sign in":

Before

And here is how it looks after pinching to resize the window to fix the size issue, how it should look:

After

What is going on?? I have tried all sort of meta properties and strange CSS hacks found online, but none of them work.

serlingpa
  • 12,024
  • 24
  • 80
  • 130

1 Answers1

0

Ok, so I found a solution in this post.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Works perfectly!

serlingpa
  • 12,024
  • 24
  • 80
  • 130