This page outputs the values of five things as reported by your browser. The screen resolution, the browser viewport, the layout viewport, the pixel density, and the viewport scale. On mobile devices, it also tells you if the page is zoomed or scaled out.

This page is responsive and a viewport meta tag as well as media query based styles. It represents the behaviour of a responsive website.

Click here to reload this page with the responsive styles and viewport meta tag disabled. By doing this you could say that this page represents the behaviour of a non-responsive (desktop) website.

Further reading

• What is my viewport size and pixel density?
• Measuring browser viewport size with Google Analytics
• WordPress plugin: Measuring browser viewport size
• Beantin blog posts tagged with ‘browser viewport’

Visual viewport size

window.innerWidth and window.innerHeight.

The viewport size, as reported by your browser is:

Orientation

Calculated from window.orientation. 0 is the device default orientation. 90 is laying on it’s left side. -90 is laying on it’s right side. 180 is upside down.

The page orientation, as reported by your browser is:

Viewport scale

Calculated from window.innerWidth and screen.width (or height in some cases)

The initial (calculated) viewport scale:

Layout viewport size

document.documentElement.clientWidth/Height.

The page size, as reported by the the browser:

Device pixel density

window.devicePixelRatio.

The device pixel ratio, as reported by your browser is:

Screen size

screen.width and screen.height.

The screen size, as reported by your browser is:

Thanks to Edward Cant for providing some code and inspiration for the viewport scale calculation method.

Questions and comments?

Contact details: @beantin.
http://beantin.se/about-james-royal-lawson
Email: james@beantin.se. Mobile: +46 73 593 16 54