Disabling pinch and zoom on mobile devices

HTML & CSS
1

Hey guys, been a while since I have posted here, but I have a new site I am working on. Wordpress with the imedica theme, and I am trying to disable pinch and zoom on it. Site is carolinafamilyortho.com, and I am trying to disable pinch and zoom like this website - 1776united.com.

I have done this in the past with but it does not seem to be working. The reason for this is when you click on contact forms to fill forms out it automatically zooms in to the field… I don’t want this as it cuts off some menus and text on the locations page.

2

Disabling pinch and zoom is a very bad thing to do unless you are making an app or similar that has controls that cannot be resized. For the mobile web disabling zoom is akin to telling your users to go somewhere else :slight_smile:

I looked at that site but as I was unable to pinch and zoom to read anything the site was useless for me or anyone over 50 I should imagine.

They disable zoom by using a maximum scale in the meta viewport tag.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

In one fell swoop they have made the site unusable for vast numbers of users.

Is that on android as my iphone does not zoom when I enter form data?

Your forms on the contact page however are cut off because they are too big to fit on mobile and you have just hidden the overflow which is not the best way to handle these things. Most of the time if you are hiding the overflow then that means you have not managed to make the layout scale to fit properly,

If you are 100% sure you must disable pinch and zoom then only do it on the page in question and not site-wide or your mobile visitors will leave in droves.

3 Likes
3

Yes I am on an iphone, text on 1776united.com looks fine to me except the 3 small boxes at the top, but those are images anyways and need to be adjusted.

I have used that and it doesn’t work, I thought I copied and pasted that code in the original post but it seems to have disappeared.

4

That’s because you have better eyesight than me. :slight_smile: I struggle to read that even with my glasses on. You should not make presumptions about what people can or cannot read but allow them the freedom to scale if they so wish.

On the contact page you still have the old meta tag.


	<meta name="viewport" content="width=device-width, initial-scale=1">

Where have you added the new meta tag one? On which page?

As I said above you should first concentrate your efforts on fixing those cut off form elements as they stick out the right side of the viewport on mobile.

1 Like
5

I believe if an input text size is less than 16px, IOS will zoom. An option is to make sure your input field text size is set to 16px.

Try adding one of these in your CSS:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

On the above, since you are using WP, you may have to add !important after the 16px to override the theme default.

If the above doesn’t work try this:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    }
}

Or this:

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

Again, you may have to add !important after the 16px for WP. Also,because the font size may increase from what you have now, you will have to increase the size of the input field to accommodate so its not scrunched.

6

I put the old code back because what I was using wasn’t working. Also scaling and zooming are different in my opinion, I do not want people to zoom in, I want it like an app, needs to be built and function across all mobile platforms the same. It’s easy to achieve, just have to make the proper styling changes. I find that mobile sites with zoom enabled tend to not be as fluid and nice, like I mentioned iphones zoom in on fields so it cuts off surrounding links and field, makes it look different than was originally planned. Which then leads to frustration on the viewers side. You are more savvy with a phone I’m sure so zooming in and out and moving around websites is nothing. But I cannot tell you the amount of times I have seen my parents, my wifes parents, or bosses, or older people in general surfing on their mobile device and have issues zooming in and out, do I pinch and zoom ,do I double tap? Most have issues just pressing the app icons to launch apps, double clicking, or not, pressing and holding or not. So to eliminate that and style it accordingly to mobile phones is what I prefer to do. Have never had any issues or complaints with it in the 10+ years making websites.

7

Sorry if this comes over as a bit over-bearing but I think its an important point to make. :wink:

Then it is impossible for us to say whether the fix was in fact working and you were just viewing a cached version without the change or if there was perhaps a typo. I’ve lost count of the number of times someone has said the code isn’t working only to find it wasn’t implemented correctly so I like to see at first hand when a solution doesn’t work. It also helps to point in the right direction if the code does fail as that avenue can be eliminated.

Here is the tag in a demo page showing that it cannot be pinched and zoomed in ios.

http://www.pmob.co.uk/temp2/no-pinch.html

I’ve looked again at your page and I can’t seem to replicate the problem you are addressing so please provide a screenshot of the problem in action in case we are talking about different things :slight_smile: I know android devices handle these things differently but it may not be possible to counter some native actions.

Here is a screenshot from the iphone showing how the form looks when filled in.

640×960 42.6 KB

As you can see it’s not automatically zooming but you should also take heed of the comment I made about your page not fitting on mobile because some elements are too wide and this in itself can cause scaling problems on mobile. This should really be the most important issue that you need to address first!

You are of course free to do what you think fit and I can only offer expert opinion from those involved in this industry.

http://adrianroselli.com/2015/10/dont-disable-zoom.html
https://twitter.com/zeldman/status/651114499290697728

And lastly from the html5 specs themselves:

https://www.w3.org/TR/2017/WD-html52-20170117/document-metadata.html#the-meta-element

Warning
<meta name="viewport" content="..."> allows authors to define specific viewport characteristics (such as the layout viewport’s width and zoom factor) for their documents. Among these is the ability to prevent or restrict users from being able to zoom, using content values such as user-scalable=no or maximum-scale=1.0. Authors should not suppress or limit the ability of users to resize a document, as this causes accessibility and usability issues.

The following examples illustrate code that should be avoided:


<!-- DO NOT DO THIS -->

 <meta name="viewport" content="user-scalable=no">

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

There may be specific use cases where preventing users from zooming may be appropriate, such as map applications – where custom zoom functionality is handled via scripting. However, in general this practice should be avoided, and HTML conformance checking tools should display a warning if they encounter these values.

Note that most user agents now allow users to always zoom, regardless of any restrictions – either by default, or as a setting/option (which may however not be immediately apparent to users).

There are use cases for disabling zoom but to disable sitewide on a website is simply bad practice. Don’t take my word for it just google the experts.:slight_smile:

5 Likes
8

I appreciate the feedback, I am actually referring to the locations page, when you put in your zipcode to the locstions finder. I haven’t finished building the contact page out yet so I know of the issues there. On the locations page when you click the box to put in your address or zip code it would zoom in, I ended up fixing the zoom function so it no longer does that. And I am really interested in actual case studies or statistics regarding enabling zoom/disabling it. Over the 6 years of owning a smart phone, unless I manually zoom in I hate that feature when it zooms in to text fields or text boxes to type in. I understand how it could be useful if you don’t have a website completely mobile optimized and style for a phone… But to me it is similar to an app, you can’t zoom in on apps…

9

That element is in an iframe so I doubt anything you do in the main page would have an effect but I’m guessing the zoom was a script option of the widget anyway rather than a native action. Glad you solved it anyway :slight_smile:

An app is a completely different beast to a normal website (even well optimised mobile websites). In most cases an ‘app’ does one thing and does that one thing very well. A website on the other hand usually does hundreds of disparate things and caters for vastly different audiences.

If you have an app that is a game then of course you don’t want it to scale but usually you would provide other options to increase text size etc. If you create forms on apps you usually build custom user input sections or utilise the native keyboard or other features of the device which are mostly only available before you compile the native code when you build the app. You may also cater for users by offering larger text versions where content may be hard to read. You cannot do all of these things on a normal website so its best left to the user to decide when they need to increase text size or not.

In the end it’s your choice but its one of those questions that just won’t go away and heavyweight opinion throughout the industry simply says ‘don’t do it’.

I can see use cases for disabling the pinch and zoom so won’t say never do it but when you do so I would make sure that you offer the visitor the function to increase text size when you do so and for images allow a click to a larger version (especially if you are trying to sell the product).:slight_smile:

Web design was never straight forward and there’s always someone trying to push their view or get in your way:). We just do the best we can with the information we have available.

3 Likes
10

I guess you could zoom out in those occasions?

Then that’s not an argument for disabling the user zoom, rather it suggests to let the user be able to zoom as he pleases.

I totally agree with @PaulOB here!

11

Thanks for the feedback, but this post wasn’t asking for opinions as I have heard all this before. I was just looking for help in the code, which is now up and running. I agree with him as well but I just needed help with code.

2 Likes
12

You probably aren’t concerned with Windows phones, but just recently the latest version of Edge browser (on I believe both mobile and desktop, but my mobile version hasn’t updated yet it seems) the meta tag to prevent user zoom is no longer listened to (due to tiny sites people can’t zoom to read).

I won’t bet on it, but with knowing iOS (or maybe it was just mobile Safari? not sure) did similar about a year ago, I can see this becoming a trend (in browsers).

So be aware that if this ignoring the meta tag thing spreads to blink and gecko, zooming will become available on that site to more and more people.

As for me, I voted for that issue for Edge :slight_smile:

4 Likes
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.