CODEWITHSUNDEEP
javascriptmobile
Banana
Banana

Reputation: 4228

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?

Upvotes: 18

Views: 63810

Answers (4)

Lizardx
Lizardx

Reputation: 1195

Ken Fyrstenberg, great stuff, thanks. I was looking for an easy way to detect all the possible screen size and resolution data, and to answer the question of what the ratio is good for, it lets you see if it's for example a retina display type high resolution device.

wh:768x1024 cwh:768x905 rwh:1536x2048 ts:touch

combined with the touch tests check this related SO:

I can get a very good sense of the actual screen/touch specs of the devices our real users are running.

for web stuff, of course, what you really are interested in is the size of the actual browser inner window, the space you are allotted on the device that is. Just as an aside, I've already seen that apple devices appear to always give the portrait mode dimensions, eg, 768 x 1024 for a non retina display iPad, which is a bit annoying because I was hoping to also learn how most users actually interact with the web and our site.

Android seems to give the actual width/ height of that moment, ie, either landscape or portrait width/height.

For example:

var ratio = window.devicePixelRatio || 1;
var is_touch_device = 'ontouchstart' in document.documentElement;
var touch_status = (is_touch_device) ? 'touch' : 'no-touch';
touch_status = ' ts:' + touch_status;
var width_height = 'wh:' + screen.width + 'x' + screen.height;
var client_width_height = ' cwh:' + document.documentElement.clientWidth + 'x' + document.documentElement.clientHeight;
var rw = screen.width * ratio;
var rh = screen.height * ratio;
var ratio_width_height = ' r:' + ratio + ' rwh:' + rw + 'x' + rh;
var data_string = width_height + client_width_height + ratio_width_height + touch_status;

This creates a lot of data about the client system which you can then pass to something using whatever method you like.

UPDATE: It just took a few minutes using this method to find how apple devices actually report their width/height:

wh:375x667 cwh:667x375 r:2 rwh:750x1334 ts:touch Device type: mobile

As you can see, the document.documentElement.clientWidth method reports the actual width if portrait/landscape, good stuff.

Upvotes: 7

Jan Dürrer
Jan Dürrer

Reputation: 31

This will work in mobil device too 

screen_width = document.documentElement.clientWidth;
screen_heght = document.documentElement.clientHeight;

Upvotes: 3

user1693593
user1693593

Reputation:

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;

Upvotes: 48

Strille
Strille

Reputation: 5781

You can use window.screen.width and window.screen.height to detect the screen resolution of the device.

Upvotes: 1

Related Questions