Responsive Web Design - The Viewport

The Viewport is probably the most important aspect of Responsive Web Design. I was surprised that I had some code from 2011 that had a Viewport Meta Tag. I admit that I had no clue what it was at the time.

As usual I took my main inspiration from the W3C website and lookig at my CSS for responsive design I must have copied a whole chunk of code from there not really knowing what I was doing. The Clearfix is a prize example of this as born out by the .row class that clears the floats for the layout. The MDN pages give a fuller desciption of the Viewpoint tag and also point to the CSSWG (CSS Working Group) that seems to be the source document.

W3C

This is a simplistic overview.

The viewport is the user's visible area of a web page.

For a fuller explanation go to the W3C website.

Links

• CSS Position
• CSS Media Query
• The new Responsive layout
• Setting the Viewport- Where I came across Allen Pike

External Sources

• Responsive Web Design - The Viewport - 🔗 - W3C
• CSS @media Rule - - W3C
• Using the viewport meta tag to control layout on mobile browsers - 🔗 - MDN
• CSS Device Adaptation Module Level 1 - 🔗 - CSSWG
• Responsive Web Design - Media Queries - 🔗 - W3C