Html meta tag viewport should be set to appropriate value for responsive web sites. Viewport content values like width define how the site will render on mobile device.
Few possible viewport values
Here are some possible viewport values:
- Viewport which allows user resizing/scaling
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
You typically will want to use this value.
- Viewport which does not allow user resizing/scaling
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scaling=no" />
- Viewport with width fixed which does not allow user resizing/scaling
<meta name="viewport" content="width=300, initial-scale=1.0, user-scaling=no" />
Using css3 media queries for responsive design
In case you want to define css which applies to screen width < 480px, you can use the following css:
@media screen and (max-width: 480px) {
/* desired css */
}
In case you want to define css which applies to screen width > 480px and width < 600px
@media screen and (min-width: 480px) and (max-width: 600px) {
/* desired css */
}
Note that even though media queries are more relevant for mobile browsers, they also work for desktop browser when browser window is resized. This is pretty handy to test the css during development.
Few points to note
- fixed width of any html element takes precedence over viewport value. e.g. If viewport is 100 but a div tag itself has a width of 200px, the display will be 200px for the div.
- If viewport is not specified the default viewport width of mobile may be used. its best to define the viewport for sites which can be accessed on mobile.
- Viewport has not effect on desktop browsers like Google Chrome, Firefox. It is only used for mobile.
- Typically responsive design use width for responsiveness. Use of height does not seem to be required.
- You may want to visit css3 w3 media queries spec for more info on media queries. Also note that IE8 does not support css3.
