Responsive Web Design
w3cViewport
When using Media Queries you need to include a viewport otherwise you will not get the anticipated result.
Viewport - Why you need it
When the contents of a web page are scaled down to fit a smaller screen, the browser uses a default viewport in order to make the calculations for the reduced screen size of the receiving device.
For most browsers the default width is 980px but for Internet Explorer it 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. For example Safari takes whatever is on the screen at the width of 980px and reduces that to the smaller size for the tablet or phone. If your content is wider than 980px then parts of it will be cut off, if it is narrower then there will be blank areas.
You can override the default without using Media Quiries by just replacing the default of 980px by a different size, for example:
<meta name="viewport" content="width=1050">
but the problem with this is the larger you make the width the smaller the information will be on the small screen.
You can direct the viewport so that it is dependent upon the device size and not the default viewport size of a particular browser.
Viewport - Where is it located
The Viewport is documented in a meta tag in the head of your document.
<meta name="viewport" content=" ">.
@viewport rule W3C
Some time ago Opera suggested that the viewpoint should be placed in the CSS and not in a Meta Tag. As of Dec 2012 this is still at the discussion stage.
Viewport- Format
<meta name="viewport" content="">
For the content property you can either use sizes or refer to the device
Viewport - Values
width (px)
<meta name="viewport" content="width=number">
The number represents the width of the device you are targeting but it is not really practical since you will want to target a number of devices with varying widths.
device-width –
<meta name="viewport" content="width=device-width">.
this will work for the width of the viewing device and is probably the best one to go with but in some tablets when you switch from portrait to landscape the size of everything increases too much and elements can appear blurry.
If you add:
minimum-scale=1.0, maximum-scale=1.0
there is no problem going between landscape and portrait but there is a big disadvantage, the user will not be able to scale the content so you need to keep this in mind:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> width (px) –
<meta name="viewport" content="number"> initial-scale (number)
initial scale
–In the example initial-scale=1.0 sets the zoom capacity to 100%.
<meta name="viewport" content= "initial-scale=1.0 width=device-width">
minimum-scale
–<meta name="viewport" content= minimum-scale=1.0 width=device-width">
for user zooming out
maximum-scale –
<meta name="viewport" content= maximum-scale=1.0 width=device-width">
for user zooming in
user-scalable(yes or no) –
specifies whether or not the user can zoom in or out.
device-height (px) –
the full value of the output deviceI cannot think of an instance when you would need to use this.