(Above in red) is Ben Frain 's tool to measure a device's viewport size in action.
If you are looking through a tablet or phone you must first re-orientate the tablet or phone 90 degrees to get a size in pixels of the available screen (or viewport) of the device you are looking through.
My responsive web design experiments with my Google Nexus 7 tablet (that is Nexus 7 version 1 not Sep 2013 version) lead me to believe that the viewport size for Google's "flagship" 7 inch tablet has the following viewport dimensions:
Note this is with Android 4.4.2
Portrait: width 601px height 881px
Landscape: width 962px height 529px
Below is now out of date see immediately above for latest Android OS ver.
Nexus 7 Viewport in portrait orientation - Width: 603px Height: 797px
Nexus 7 Viewport in landscape orientation - Width: 966px Height: 444px
(Width being the crucial dimension for responsive web design consideration.)
Information below was concerned with Nexus 7 ver. 1 with Android ver 4.1.1 and now is a bit out of date.
This viewport size information is useful for determining responsive design breakpoints and I found interesting because when the Nexus 7 is in landscape orientation (on it's side) it is larger than the iPad in portrait (width 768px) AND when the Nexus 7 is in portrait orientation (long side left like a paperback book) it is larger than an iPhone on it's side (landscape viewport width 480px) but smaller than an IPad in portrait (width 768px).
This could also be called another pain in my dot hole (or pixel hole) for implementing responsive web design.
Other major pain points.
iPad Viewport in portrait orientation - Width: 768px Height: varies
IPad Viewport in landscape orientation - Width: 1024px Height: varies
iPhone Viewport in portrait orientation - Width: 320px Height: varies
IPhone Viewport in landscape orientation - Width: 480px Height: varies
Now you can add the Nexus 7 portrait view width 603px and landscape width 966px.
Based on expected user volumes of the most popular devices*.
(*If the 7" Google Nexus 7 tablet proves as popular as Google hopes)
The responsive viewport breakpoint "staircase" in my opinion becomes:
320px, 480px, 603px, 768px, 966px, 1024px
This Google Android worker Dianne Hackborn (new window) talks about the following dimensions for the Google Nexus 7 tablet but I don't really know what she is talking about.
I note that 600 (hers) is near 603px (mine) and 800 (hers) is near 797px (mine) and 961px (hers) is near 966px (mine) but it doesn't really correlate in a way that I grok yet.
Width x Height: 800 x 1280.
"tvdpi" density (numerically that is 213).
Width x Height: 600 x 961 in dp units.
If I am substantially wrong please tell me by using the email link which is either at the top right (desktop) or down below (mobile or tablet) ..sigh!..don't you just love responsive web design...?
Hard Web is a web design, SEO and Google Ads Management business based on the Gold Coast in Qld, Australia since 1999.
I am the Hard Web chief cook and bottle washer David Thatcher.
I have been a self-employed web designer since 1999 and I specialise in web design, SEO and Google integration.
Author: David Thatcher