Media Quieries
(1) Introduction
(2) Media Queries
(3) Viewpoint
Example and Descriptions
Example with Columns
Responsive Web Design
Viewpoint – Part Three
When using Media Queries you need to include a Viewpoint otherwise you will probably not get the anticipated result.
Viewpoint - Why you need it
When the contents of a web page are scaled down to fit a smaller screen, a default viewpoint is used in order to make the calculations for the reduced size. Safari and Firefox's default width is 980px and Internet Explorer is 1024px. In addition to these sizes not being of the same value they do not take into consideration a site with a completely different width or a flexible/liquid page, which has a range of different widths.
Viewpoint - Where is it located
The Viewpoint is documented in a meta tag and placed in the head of your document. (Opera has proposed that the Viewpoint be included in the CSS rather than a meta tag).
ALERT June 2011: At the moment W3C is working on the Opera recommendation that the Viewpoint will be placed in the CSS instead of the meta tags . For the time being no browser supports it in the CSS.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
Viewpoint - What are It’s Values
- width (px) – the original width that was used for the site
- device-width – the full value of the device's screen-= initial-scale (number)
- minimum-scale (number) for user zooming out
- maximum-scale (number) for user zooming in
- user-scalable – (yes or no) specifies whether or not the user can zoom in or out.
You probably will not need to use height - height – this is the original height that was used for the site
- device-height (px) – the full value of the devices
Viewpoint - What is it’s format
You can either create a meta tag which represents the width of the viewing area of the original web page when viewed on a desktop:
<meta name="viewport" content="width=980" />
For a responsive design it would be its viewing area at its max width:
<meta name="viewport" content="width=420" />or
you can create a meta tag for a moble device
<meta name="viewport" content="width=device-width" />
When I just have:
content="width=device-width"
The content does not fill the space but when I add:
minimum-scale=1.0, maximum-scale=1.0"
the content fills the space but the user will not be able to enlarge the text so you need to keep this in mind
.
share / bookmark