Skip to content

Commit

Permalink
Disable zoom on mobile devices to avoid unescapeable map issue (#346)
Browse files Browse the repository at this point in the history
This fixes #344 by
preventing zoom entirely, on mobile devices:

> From https://reportedcab.slack.com/archives/C9VNM3DL4/p1657204889174239?thread_ts=1656783831.210109&cid=C9VNM3DL4:
>
> > > UPDATE: you appear to have fixed #2 by disabling pinching, but this also makes map view crash easily (on my first two tries, once it crashed and sent me back to Reported login, then it crashed and sent me to a Chrome "Can't open this page" (edited)
> >
> >
> > I don't think I've made any changes relating to pinching or the map in at least a year (if you're curious, you can see the list of changes here), so I'm not sure how to explain the difference in behavior you're seeing.
> > That said, I can try to discuss the issue:
> > > (2) map view issue #1: The only ways to get out of map view are (1) click one of the buttons on the bottom, or (2) touch the grayed-out part of the underlying page. If neither of those is visible, you can't get out of map view. This means that if you pinch the map out (expand it), even accidentally, so that the margin around the map itself is no longer visible, there is no way to get out of map view, you have to reload the page (and re-upload your photo or maybe start the whole report over, I can't remember). (You can't pinch it back in if the entire window is full of map.)
> >
> >
> > I'm curious how you were previously able to pinch-zoom the map/page such that neither the buttons or the margin were visible. When I try (on Android), I can either pinch the map, which only zooms the map while leaving the rest of the page alone, or I can pinch the margin, which zooms the entire page, but the margin is still visible because I'm pinching it.
> > Perhaps things behave differently on iOS?
>
> > Actually the map zoom issue is: if you are zoomed out at all when you enter map view (which you often are, especially on an iPad, and you may not realize it), you’re screwed, because you can’t zoom in (in order to see the buttons or margins, the things you have to click in order to get out of map view) if the only things your fingers can touch are the map itself
>
> > ohhh, I see now, and I was able to reproduce that issue. I wonder if there's a way to detect the zoom level, and prompt the user to zoom back out all the way before they can open the map
> > (side note, I think we're using "zoom in" and "zoom out" with opposite meanings. To me "zooming in" makes the things on screen bigger, and "zooming out" makes them smaller)
  • Loading branch information
josephfrazier authored Jul 8, 2022
1 parent 5a87ae1 commit 0ec5908
Showing 1 changed file with 4 additions and 1 deletion.
5 changes: 4 additions & 1 deletion src/components/Html.js
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,10 @@ class Html extends React.Component {
<meta httpEquiv="x-ua-compatible" content="ie=edge" />
<title>{title}</title>
<meta name="description" content={description} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>
<meta name="theme-color" content="#008000" />
{scripts.map(script => (
<link key={script} rel="preload" href={script} as="script" />
Expand Down

0 comments on commit 0ec5908

Please sign in to comment.