During web development and mostly when writing html pages, as developers at times we forget to specify the basic viewport (area of the window in which web content can be seen) parameters that affect the appearance of our pages on different device screens. The meta tag below handles alot when it comes to how a user interacts with a page on mobile devices and tablets.
Meta Tag
<*meta name=”viewport” content=”width=device-width, initial-scale=1.0, user-scalable=no">*
So today I decided to write and talk about it, the code above contains a couple of parameters to say
- meta name="viewport" which typical appears on every mobile-optimized site
- width=device-width this property controls the size of the viewport which can be set to a specific number of pixels like width=750 or to the special value device-width, which is the width of the screen in CSS pixels at a scale of 100%
- initial-scale=2.0 property controls the zoom level when the page is first loaded
- user-scalable=yes by default this property is set to yes even when not specified, according to me this is the most vital property that I have found out to have alot of effect on how the page behaves on phones and other touch screen device,if the user-scalable is set to yes then the user has all the right to zoom the page on a phone and this does not limit the accessibility of your site even to the low vision people and if set to no the user will not be able to zoom the page no matter what which might affect some users during accessing your site
So, during page development, always mind about this and specify the write property depending on your app requirement.
Note: Always enclose all the parameters with double qoutes in content like content="......."
If you might be interested in reading more about this, please follow the links below;
Mozilla MDN
The A11Y Project
Sitebulb
css-tricks
Top comments (0)