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

Question

I was going through the source code of a website and found this piece of code    lt meta name  viewport  content  width device-width  initial-scale 1 0  user-scalable 1 0  minimum-scale 1 0  maximum-scale 1 0  gt    I want to know what this initial scale  user-scalable  minimum-scale  maximum-scale are and what does those values mean  And also tell me what all values they accepts

User · Answer

viewport meta tag on mobile browser       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

User · Answer

user-scalable    user-scalable yes  default  to allow the user to zoom in or out on the web page    user-scalable no to prevent the user from zooming in or out   You can get more detailed information by reading the following articles    http   www html-5 com metatags meta-viewport html https   css-tricks com snippets html responsive-meta-tag  https   developer mozilla org en-US docs Web HTML Element meta Attributes    Demo Code  recommended    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D       lt meta charset  UTF-8  gt  x000D       lt meta http-equiv  X-UA-Compatible  content  IE edge  gt  x000D       lt meta name  viewport  content  width device-width  initial-scale 1 0  minimum-scale 0 5  maximum-scale 3 0  gt  x000D   lt  head gt  x000D   lt body gt  x000D       lt header gt  x000D       lt  header gt  x000D       lt main gt  x000D           lt section gt  x000D               lt h1 gt do not using  lt mark gt user-scalable no lt  mark gt  lt  h1 gt  x000D           lt  section gt  x000D       lt  main gt  x000D       lt footer gt  x000D       lt  footer gt  x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

This meta tag is used by all responsive web pages  that is those that are designed to layout well across device types - phone  tablet  and desktop  The attributes do what they say  However  as MDN s Using the viewport meta tag to control layout on mobile browsers indicates      On high dpi screens  pages with initial-scale 1 will effectively be   zoomed by browsers    I ve found that the following ensures that the page displays with zero zoom by default    lt meta name  viewport  content  width device-width  initial-scale 0 86  maximum-scale 3 0  minimum-scale 0 86  gt

User · Answer

It s for controlling aspect on mobile phones and tablets  You will find more info here   https   developer mozilla org en-US docs Mozilla Mobile Viewport meta tag

User · Answer

They are viewport meta tags  and is most applicable on mobile browsers  width device-width This means  we are telling to the browser    my website adapts to your device width     initial-scale This defines the scale of the website  This parameter sets the initial zoom level  which means 1 CSS pixel is equal to 1 viewport pixel  This parameter help when you re changing orientation  or preventing default zooming  Without this parameter  responsive site won t work  maximum-scale Maximum-scale defines the maximum zoom  When you access the website  top priority is maximum-scale 1  and it won   t allow the user to zoom  minimum-scale Minimum-scale defines the minimum zoom  This works the same as above  but it defines the  minimum scale  This is useful  when maximum-scale is large  and you want to set minimum-scale  user-scalable User-scalable assigned to 1 0 means the website is allowing the user to zoom in or zoom out  But if you assign it to user-scalable no  it means the website is not allowing the user to zoom in or zoom out

User · Answer

This post may help  https   css-tricks com snippets html responsive-meta-tag  It gives a full description on the meta tags and its different attributes

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

Examples related to html

Examples related to attributes

Examples related to tags

Examples related to viewport

Examples related to meta-tags