Providing Solutions For Web Development Languages and Platforms

User Scalable In Viewport Meta Tag Prevents Zoom On Mobile

User Scalable is the property for content attribute of viewport meta tag which allows the device to zoom in and out. There are a lot of properties for responsive meta tag which allows us to handle the html5 viewport for better responsiveness. Here we will get to know how can we disable zoom on mobile devices with user scalable and the working of other useful properties of viewport tag to have a better User Experience(UX).

What is Viewport?


The browser’s viewport is the part of the web content that is currently being viewed. As when you opened up this page, the first thing you have seen is the first viewport and then you scrolled down to another viewport.

Different screen sizes have different viewports such as mobile viewport is smaller in size. Viewport meta tag is necessary to set web page width to device width to get the content aligned perfectly.

Viewport Meta Tag


Here is an example of responsive meta tag along with all the attributes and properties. Mobile Viewport, if designed resposive will display clean layout with meta responsive.


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

In short, we can say that viewport meta tag offers a number of ways to control how a web page displays and behaves on a range of mobile devices. It let you handle Viewport Scale using various scaling properties of viewport tag.

The above shown responsive meta tag will let the browser render the width of the page at the width of its own screen. So that if screen is 320px wide, the browser window will be 320px wide rather than zoomed out and showing 960px wide. Meta resposive will let the web page not to zoom when get opens as initial scale is 1.0 and minimum scale along with maximum scale tells the browser about how much zoom in and out is allowed. User Scalable no in the viewport tag itself will disable the zoom in and out.

Note

If your website is not designed responsively and can not work well at different sizes, it is recommended not to use viewport meta tag because you can experience the breakdown of web layout especially on mobile devices with messy mobile viewport.

Now, let’s discuss about all the properties of responsive meta tag. So that you will come to know how a specific property works and how it can be implemented.

Property Description
width
width property controls the size of the viewport. Property Values can be either device-width or specific pixels
initial-scale
initial-scale property controls the zoom level when the page is first loaded. Property Value can be pixel ratio depends on the display density.
minimum-scale
minimum-scale property sets the minimum amount of zoom visitor can do on the page. Property Value can be pixel ratio depends on the display density.
maximum-scale
maximum-scale property sets the maximum amount of zoom visitor can do on the page. Property Value can be pixel ratio depends on the display density.
user-scalable
user-scalable property allow/disallow the device to zoom in and out. Property Value can be either yes or no
Point To Be Noted

If somewhere on your website, font size is small or it’s needed to zoom, It is generally recommended that you don’t prevent zoom mobile, as that’s annoying and potentially create an accessibility problem.

Implementing Properties In Viewport Meta Tag


width – Set The Device Width

With the width viewport meta tag property, You can tell the browser to display your web page at the width of the device.

<meta name="viewport" content="width=device-width">

Especially in case of iphone, without using viewport meta tag, mobile safari renders your web page at 980px and force the user to tap to zoom. With the viewport meta tag, you can also set the width to a specific value. For Example –

<meta name="viewport" content="width=600">

Width value must be in pixels(px). Just omit the units.

height – Set The Device Height

As same as width viewport meta property, This viewport meta responsive property helps in handling horizontally scrolling site. Here’s an example to use it –

<meta name="viewport" content="height=device-height">

With this viewport meta property, you can also set the height to a specific value. For Example –

<meta name="viewport" content="height=600">

Height value must be in pixels(px). Just omit the units.

initial-scale – Set Initial Scale

You can handle the display for orientation change by setting the meta initial scale in viewport tag.

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

In case of an iphone viewport, upto the release of iOS6, web page would zoom on orientation change and it needed JS solution to get it fixed. But now, in iOS6+ it works fine and does not zoom on orientation change.

minimum-scale and maximum-scale – Set Minimum and Maximum Scale

You can control how far visitor can zoom in and out by setting minimum and maximum scale viewport meta property. Maximum Scale value enable zoom on mobile website. Here is an example with both minimum and maximum meta scale properties.

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=3.0">
user-scalable – Stop Zooming

You can prevent visitor to zoom in and out with user scalable property. It is only recommended if your website is designed responsively. Here is an example how to disable zoom for mobile.

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

Leave a Reply

%d bloggers like this: