The (iPhone) view is zoomed in, and appears not mobile friendly after logging in with mobile device
NickSchimek opened this issue · 3 comments
Describe the bug
When I log in with a mobile device. The screen is zoomed in and appears not to be a mobile friendly app.
Pinching the screen and zooming out fixes the issue, but the page should load without issue.
To Reproduce
- Go to https://dwellingly-app.herokuapp.com/ on a small screen size mobile device, like a phone.
- Sign in with
admin@dwellingly.org&asdfasdfcredentials - Notice the screen is zoomed in.
- Visiting the page renders without zoom
- Clicking on an input field zooms the screen in for the user to enter their credentials
- After logging in the screen stays zoomed in.
Expected behavior
- I would expect the screen to look like the following without having to manually zoom out.
Smartphone (please complete the following information):
- Device: iPhone 10
- OS: latest
- Browser Chrome/Brave
@NickSchimek I was looking into this issue and it sounds like this zoom-in on input fields is an iOS feature. I found a couple resources on how to disable this behavior (assuming we do not want it):
https://stackoverflow.com/questions/2989263/disable-auto-zoom-in-input-text-tag-safari-on-iphone
https://www.warrenchandler.com/2019/04/02/stop-iphones-from-zooming-in-on-form-fields/
What do you think of this approach? I do not have an Android to test on, so I can't say for sure it's iPhone specific, but it's the only thing I could think of that makes sense since we aren't doing anything in the code to trigger the zoom.
Great! I will give it a try.