Browser viewport data
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.
- 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:
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:
Calculated from window.innerWidth and screen.width (or height in some cases)
The initial (calculated) viewport scale:
Layout viewport size
The page size, as reported by the the browser:
Device pixel density
The device pixel ratio, as reported by your browser is:
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.
Email: firstname.lastname@example.org. Mobile: +46 73 593 16 54