Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The (iPhone) view is zoomed in, and appears not mobile friendly after logging in with mobile device #770

Open
NickSchimek opened this issue Dec 6, 2021 · 3 comments
Assignees
Labels
bug Something isn't working FRONTEND good first issue Good for newcomers help wanted Extra attention is needed

Comments

@NickSchimek
Copy link
Member

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

  1. Go to https://dwellingly-app.herokuapp.com/ on a small screen size mobile device, like a phone.
  2. Sign in with [email protected] & asdfasdf credentials
  3. Notice the screen is zoomed in.
  • Visiting the page renders without zoom

IMG_2125 2

  • Clicking on an input field zooms the screen in for the user to enter their credentials

IMG_2126
IMG_2127

  • After logging in the screen stays zoomed in.

IMG_2129

Expected behavior

  • I would expect the screen to look like the following without having to manually zoom out.

IMG_2130

Smartphone (please complete the following information):

  • Device: iPhone 10
  • OS: latest
  • Browser Chrome/Brave
@NickSchimek NickSchimek added bug Something isn't working FRONTEND labels Dec 6, 2021
@NickSchimek NickSchimek added this to To do in Sprint Winter 2021 via automation Dec 6, 2021
@NickSchimek NickSchimek changed the title The view is zoomed in, and appears not mobile friendly after logging in with mobile device The (iPhone) view is zoomed in, and appears not mobile friendly after logging in with mobile device Jan 20, 2022
@WilliamWang2002 WilliamWang2002 self-assigned this Jan 25, 2022
@WilliamWang2002 WilliamWang2002 removed their assignment Feb 22, 2022
@NickSchimek NickSchimek added help wanted Extra attention is needed and removed Milestone 1 labels Aug 1, 2022
@Chris-Boe Chris-Boe added the good first issue Good for newcomers label Aug 2, 2022
@maddieijams
Copy link

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

@NickSchimek
Copy link
Member Author

NickSchimek commented Oct 3, 2022 via email

@maddieijams maddieijams self-assigned this Oct 3, 2022
@maddieijams
Copy link

Great! I will give it a try.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working FRONTEND good first issue Good for newcomers help wanted Extra attention is needed
Projects
No open projects
Development

No branches or pull requests

4 participants