This page has Ben Frain's tool to measure viewport dimensions which is useful for measuring responsive web design breakpoints in different devices.
Google Nexus 7 (version 1) not Sep 2013 version
Nexus 7 Tablet viewport dimensions are as follows (note this is the original version of Android it shipped with which according to this new device listing viewport measuring page was ver 4.1.1)
Portrait: width 603px height 797px
Landscape: width 966px height 444px

NEW Google Nexus 7 tablet viewport with O/S updated to Android 4.4.2 (still original Nexus 7 hardware) gives:
Portrait: width 601px height 881px
Landscape: width 962px height 529px

NEW Google Nexus 5 phone viewport with Android 4.4.2 (below)
Portrait: width 360px height 567px (height may vary on different webpages)
Landscape: width 598px height 335px (height may vary on different webpages)

Viewport Width:

Resize to find out!

Viewport Height:

Resize to find out!



(Above in red) is Ben Frain's tool to measure a device's viewport size in action.
I bought Ben's very good book ( highly recommended by me) about Responsive Web Design with HTML5 and CSS3 which had a link to the viewport measuring javascript code.

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...?



David Thatcher David Booth keynote speaker Google Engage Master class Brisbane 27 Feb 2012

(LtoR) David Thatcher and AdWords man David Booth from Cardinal Path

Hard Web is a web design, SEO and Google AdWords Management business based on the Gold Coast in Qld, Australia since 1999.
I am the Hard Web chief cook and bottle washer .

I have been a self-employed web designer since 1999 and I specialise in web design, SEO and Google integration.


Author: David Thatcher

Call 07 5526 2939 or 0401 352 269