How to Prevent Safari Zooming

You want to prevent Safari Mobile from zooming every time that you double tap on the screen. The iPhone zoom is a great feature that allows user to enlarge the page content when the user double taps on the screen. If you are building a page that is already optimized for the mobile device screen sizes you may want to disable the iphone zoom to prevent the page from looking too big. To do that you can add a meta tag to the HEAD tag of you HTML code and specify the values for the viewport:

Meta tag code

1
2
3
4

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1.0">
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width">

<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="maximum-scale=1.0">
<meta name="viewport" content="user-scalable=no">
<meta name="viewport" content="width=device-width">

You can also specify all the values in one single meta tag and separate all the different values with semicolon

1
2
3
4
5
6
7

<meta
    name="viewport"
    content="initial-scale=1.0;
    maximum-scale=1.0;
    user-scalable=no;
    width=device-width"
>

<meta
    name="viewport"
    content="initial-scale=1.0;
    maximum-scale=1.0;
    user-scalable=no;
    width=device-width"
>

By: Raul Sanchez
Category: How-To
Posted on: Friday, February 17, 2012