WP-Mix

A fresh mix of code snippets and tutorials

Disable manual resizing with meta viewport

Just a quick snippet for telling the browser to disable manual resizing of the page. You can see this technique in use here at WP-Mix as well as most of my other websites. If you view the source code of any web page on the site, you can see the meta viewport tag in effect near the top of the <head> section. Then to understand what the tag is doing, visit the site in a mobile browser and try to resize the page. You can’t. And that’s the point.

Disable Resizing

So this technique is meant for responsive designs, where the layout of the page adjusts automatically to give the best view based on the size of the browser window. So back to this site as an example, the layout is quite responsive, so if you visit on smaller mobile devices the content will be clearly viewable. Thus: no resizing by the user is necessary.

As seen in the source code, here is the HTML tag that disables the user’s page-resizing ability:

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

There are lots of other configurations for the meta viewport tag. This one disables resizing AND sets the default page width as equal to the device width, which is pretty common. It also sets the initial scale at one, which also is common.

Again, the no-resize technique is meant for responsive web pages. If your pages are not responsive, then you should NOT disable user resizing; doing so could render your pages impossible to read on smaller devices.

Here is an equivalent meta tag that accomplishes the same “no-resize” behavior:

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

No editing is required to use either one of these tags. Simply add to the <head> section of your web pages and done. Or customize with other viewport parameters, if that’s your thing.

★ Pro Tip:

The Tao of WordPress