join: new@juude

get alerts for new articles


join: new@juude

get alerts for new articles

css: casscading style sheets

Responsive Web Design



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.