search

LunatiqueCoder / luna

Luna - a React Native + Next.js template. Built with TypeScript :heart:
https://luna-gamma.vercel.app/
MIT License
264 stars 17 forks source link

fix(web): force no zoom on web #44

Closed mikehardy closed 1 year ago

mikehardy commented 2 years ago

Hey @criszz77 - this is more of a question, I am using this on my work projects because otherwise it's possible for the screen state on mobile (where people touch and drag etc) to become a bit wierd.

I don't like it though, and I think I'm wondering whether to investigate the underlying cause more (it's possible for navigation drawers to slide off screen on web as their method of hiding I think - meaning when a user zooms out via mobile pinch gesture they can see the nav bar off to the side)

The question is: how much is disabling zoom a known thing on web? Is it as big a deal as I think it is? (that is: I feel like it damages accessibility because if an element is hard to read a user may no longer just zoom in to read it I think...)

LunatiqueCoder commented 2 years ago

Hey @criszz77 - this is more of a question, I am using this on my work projects because otherwise it's possible for the screen state on mobile (where people touch and drag etc) to become a bit wierd.

I don't like it though, and I think I'm wondering whether to investigate the underlying cause more (it's possible for navigation drawers to slide off screen on web as their method of hiding I think - meaning when a user zooms out via mobile pinch gesture they can see the nav bar off to the side)

Hey @mikehardy. I think I understand what issue you are having but can you show me a screenshot or a gif?

The question is: how much is disabling zoom a known thing on web? Is it as big a deal as I think it is? (that is: I feel like it damages accessibility because if an element is hard to read a user may no longer just zoom in to read it I think...)

At a first glance, I really don't know what to say, I haven't personally disabled zoom, but as you said, except damaging the accessibility, I wouldn't see any other issue 🤔. I personally use zoom on web, both on desktop and mobile browsers. Sometimes I really don't see that well, but I also check if apps I visit are pixel perfect 😂

mikehardy commented 2 years ago

I also use zoom, so we're 2 for 2 there on "voting yes for zoom should be possible".

I changed up the way I did a secondary navigation drawer so don't have a gif right now but it was awful before. I need to check if that was just because I was doing react-navigation wrong or if it's a general react-navigation + react-native-web issue, or you could try it - just implement a drawer nav and check it on web to see if the drawer is visible off the screen if you zoom out.

Otherwise I'll put this on the pile of things to investigate when I have time for "low-priority cleaning" tasks vs "blocking path to production" tasks.

LunatiqueCoder commented 2 years ago

I will definitely try it this weekend. I had a lot of spare time until recently when I had a role change at work that includes more responsibilities and I'm very crowded now. But if you have other things that you would like to investigate and don't have time, just let me know, I'm just as curious as you are. :) As I said, I haven't used this template on a real project however I would really like to be ready in the future in case I'd have such a requirement 😂

LunatiqueCoder commented 1 year ago

Well, unfortunately, I completely forgot about this. Is this still relevant or can be closed?