Archive results for:

Viewport Meta Tag

By default mobile devices such as iPhone or Android zoom out on webpages automatically when they are viewed to give the user a more expansive view of the page, meaning everything appears smaller, but also, more pixels are squeezed onto the screen. If your page is optimized for mobile devices or responsive design (via CSS media queries and changing the layout of webpages accordingly), then all of a sudden this “zoom out” behavior only gets in the way. It means that the CSS media queries will match the dimensions of the “zoomed out” device’s, and not its actual size.

So whenever you’re optimizing a webpage for mobile devices or responsive design, the first step is to define the viewport meta (introduced by Apple)  tag to alter/ disable the “zoom in” behavior of mobile browsers, and that’s with:

The above is the device to display the page without any zooming, so how much the device is able to fit on the screen is what’s shown initially.

Within the content=”” you can enter a load of comma delimited values such as width, height, initial-scale, minimum-scale, maximum-scale and  user-scalable, such as:

width: The width of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-width” to set the viewport to the physical width of the device’s screen.

height: The height of the virtual viewport of the device. Enter a number (pixels assumed), or the keyword “device-height” to set the viewport to the physical height of the device’s screen.

initial-scale: The initial zoom of the webpage, where a value of 1.0 means no zoom.

minimum-scale:  The minimum level the user is able to zoom out of a webpage, where a value of 1.0 means the user isn’t able to at all.

maximum-scale: The maximum level the user is able to zoom in on a webpage, where a value of 1.0 means the user isn’t able to at all.

user-scalable: Sets whether the user can zoom in and out of a webpage. Set to yes or no.

To also prevent the device from zooming in on a webpage when its orientation has been changed from portrait to landscape, you can add an initial-scale and maximum-scale property and limit both of them to 1: