What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag?

The term ‘Scale’ refers to resize something and here in a Web Designer’s perspective, this is to scale or resize a website based on device viewport. The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

Here is an example:

width=device-width
This means we are telling to the browser “this website adapts to the device width.”

Initial-scale
This defines the scale the website when its opened, This parameter sets the initial zoom level, based on the dpi of the screen and keeps the same zoom level based on screen orientation.

Maximum-scale
Maximum-scale defines maximum zoom you could achieve in a page. When you access a website with maximum-scale=1, it won’t allow the user to zoom, thus disabling the pinch-zoom functionality. Its best advised not to use this parameter as it affects accessibility.

User-scalable
Assigning User-scalable=1 allows users to zoom in or zoom out. If you assign User-scalable=no, the zoom in/out property gets locked for end users.

Leave a Reply

Your email address will not be published. Required fields are marked *