Banana Banana - 5 months ago 15
Javascript Question

Get screen resolution on a mobile website

I am designing a mobile website that has a section to download wallpapers from. In order to accommodate many users, I wish to make it possible to download a wallpaper based on the screen resolution. I want to detect resolution from JavaScript and show the appropriate wallpaper.

This is what I found online and tried and failed xD:

width = window.innerWidth || document.body.clientWidth
height = window.innerHeight || document.body.clientHeight;

For my SGS3, which has the resolution 720x1280 I get the 360x567.

How should I discover the resolution of the phone from JavaScript?


You can perhaps use the screen object:

var w = screen.width;
var h = screen.height;

Update - Try to use it with the window.devicePixelRatio:

var ratio = window.devicePixelRatio || 1;
var w = screen.width * ratio;
var h = screen.height * ratio;