html - How media queries are work when i define in meta tag content="max-width=1200px;" -


how media queries work when define in meta tag content="width=1200px;" , media queries like

@media (max-width:480px){} @media (max-width: 600px) {} 

and etc. other media queries.

content="width=1200px" means layout needs @ least 1200 pixels of width.

for pages set initial or maximum scale, means width property translates minimum viewport width.

for example, if layout needs @ least 500 pixels of width can use following markup. when screen more 500 pixels wide, browser expand viewport (rather zoom in) fit screen:

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

https://developer.mozilla.org/en/docs/mozilla/mobile/viewport_meta_tag http://www.allenpike.com/2010/choosing-a-viewport-for-ipad-sites/


Comments