Mobile viewports….

Whilst I have not written this post (well, i have this one. But not the original one I’m talking about), I feel its such a fantastic eye opener that I had little clear knowledge that its only to re-share something that is fantastic.

Basically, you have 2 view ports within mobiles.
The one that the user can see: ‘Visual Viewport
The one that the browser can see at all times: ‘Layout viewport’

The only one that as a developer we’re really interested in is the later of these 2. The layout Viewport. This in essence is how most things are calculated, but really whats exciting this is how the media quires are calculated. Meaning, for testing you can use JS to work out where the break points etc will be.

Measuring this viewport:
Luckily the browser and the sexy DOM let us do this 🙂

document.documentElement.clientWidth and -Height contain the layout viewport’s dimensions.

So the article is here:
http://www.quirksmode.org/mobile/viewports2.html

Its better than mine 🙂