3

Is there a way to successfully prevent pinch zooming in safari on all iOS devices including those running on version 10?

Viewport meta tag is being ignored: 

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />

The above meta prevents pinch zooming on older iOS/Devices tested on iPhone 5 iOS 9.2 and this issue is not present. However when tested on an iPhone 6, 6+ version 10.0.1 and iPhone 7 10.0(14) this remains an issue.

From the iOS 10 beta 1 release notes:

To improve accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.

I have tried:

    document.documentElement.addEventListener('touchstart', function (event) 
    {
      if (event.touches.length > 1) 
      {
        event.preventDefault();
      }
    }, true);

Which seems to do the job ok if the user puts both fingers on the screen at the same time. But if you place one finger on the screen and then a second soon after you are able to pinch zoom. Note:event.preventDefault(); has been hit successfully as expected.

Side-note: Similar questions around e.g. How do you disable viewport zooming on Mobile Safari? but this question is aimed to directly tackle iOS 10 due to Apples change of specifications.

Community
  • 1
  • 1
CogInTheWheel
  • 41
  • 4
  • Please, please don't do this - this is a BAD idea. This ruins accessibility for people with vision issues or other accessibility issues that require zooming in on the content in order to see it properly. What good reason to you have for prohibiting proper accessibility? This even drives seniors nuts who have less than stellar vision or don't have their glasses with them and simply need to zoom a little in order to see something. – jfriend00 Oct 31 '16 at 15:51
  • I work at making specific applications that make it essential for legal reasons that specific components must be visible at all times. – CogInTheWheel Oct 31 '16 at 16:12
  • Well, it's a bad idea to ruin accessibility for a site. Find a better way to solve your problem. On a desktop computer, that would be like telling the user they can't resize their browser window. All it does is piss off users and there are likely better solutions that don't piss off users or ruin accessibility. There might even be some jurisdictions where you are required to support accessibility. – jfriend00 Oct 31 '16 at 16:14
  • Note: You can use absolute or fixed positioning to control layout for an item to make something more likely to always be visible. You don't have to prevent zooming or scrolling. – jfriend00 Oct 31 '16 at 16:28
  • 1
    @jfriend00, don't assume that all problem domains and requirements are always exactly the same, vanilla websites that should be accessible may be _your_ use case, but they are only one of many different things that run in a mobile browser. It's unhelpful. – Stoffe Nov 16 '16 at 14:58
  • @Stoffe - I'm not saying that there might not be some possible use case for ignoring accessibility or user customization of a web page, but it is usually a wrong and bad choice. So, absent any explanation for why good general web hygiene should be ignored, I'm going to advise people not to do it - everytime. As a user with poor eye sight, I find that many mobile web sites are completely ruined for me when they disable zooming when there is ZERO good reason for them to do that. So, I'm going to recommend people to stop doing it unless they offer a really good reason (which this OP has not). – jfriend00 Nov 16 '16 at 21:11
  • @Stoffe - And I'm quite sure that the legal requirements of always showing some piece of content here can be solved in a way that does not ruin accessibility (which may have its own legal requirements). That's my advice to find a better way to meet their requirement that doesn't ruin accessibility. – jfriend00 Nov 16 '16 at 21:13
  • 2
    @CogInTheWheel I had a similar requirement and found this answer to helpful: https://stackoverflow.com/a/39711930/4296614. To the others who commented here, while it is always good to remind people about accessibility but don't presume you know the specifications of what they are working on or the best way to make it accessible to all. I have this same question for a diagram that I am developing that has its own internal zooming and not overriding the mobile browser would make it more difficult to use my zoom and less accessible to anyone regardless of vision. – Rozgonyi Aug 01 '17 at 03:20
  • Agreed with Stoffe and Rozgonyi. To reiterate, you should never assume something needs to work the same way all the time just because it's what you're used to. In our current scenario, we have a specific section of the application that only needs to be zoomed. If we don't disable the pinch zoom on default, we get a very jittery experience when the events mix together. This is just our situation and how this works. There are plenty of other reasons I'm sure on why someone would need to disable the default pinch-zoom behavior. – My Stack Overfloweth May 24 '18 at 18:44

0 Answers0