Best Way to Get Screen Size on Mobile Devices?

[mwatt]

I wish to be able to detect the size of a mobile screen within JavaScript, before creating the Phaser game object.  I'm currently experiencing some issues in this area.

 

I have seen a few different opinions posts and articles about the best way to do this.  Some of these posts/articles claim that there is no one good way because of the proliferation of devices and platforms and the poor adherance to standards.

 

A couple of obvious options come to mind:

* window.screen.width and window.screen.height

* window.innerWidth and window.innerHeight.

(both of the above in window.onload)

 

There are other tries using document or body properties.  Or maybe something else I am unaware of.  I suppose CSS Media Queries might be used to piece a solution together.

 

What are the senior, most well-versed people doing out there?  What works reliably for all platforms?  If Rich is listening, what do YOU do Rich?

 

Thanks in advance if you have a moment to give input.  When I go to the wellspring of knowledge that is here, I almost never come away thirsty.

[rich]

Most the time I just do this:

var clientWidth = function () {  return Math.max(window.innerWidth, document.documentElement.clientWidth);};var clientHeight = function () {  return Math.max(window.innerHeight, document.documentElement.clientHeight);};

[megmut]

I apologise in advanced for not hitting your 'senior' or 'well-versed' criteria, but I'll share my 5 cents anyway

 

I think it's next to impossible to be able to get any website / game, app working 100% across all browsers in one application that scales canvases and webGL. There's a reason why websites often use sub-domains such as http://m.website.com. 

 

That being said, I tend to pick one good resolution and work out from there. So lets say.. 800 x 600.

 

Now, scaling is easy, pick a 1.6x ratio to maintain the aspect ration and you've got.. 1280 x 960 and 500 x 375

 

so there's three resolutions for displaying your game. Then I tackle about determining which to use. 

 

There's a good answer here: http://stackoverflow.com/questions/1248081/get-the-browser-viewport-dimensions-with-javascript

Not that I suspect you need it, but maybe for anybody else who reads this answer  

 

I embed my size determining JavaScript inside a window.onload function and callback to the start phaser function. This stops phaser from ever launching before the width and height have been set. Some people use scaling in sprites.. some people don't do any at all. If you really wanted to optamize to the full extent, you could make all your assets and game to each of those sizes and host all three like... 

 

1. http://small.mygame.com

2. http://medium.mygame.com

3. http:// large.mygame.com

 

That would keep your app lightweight and you only need JavaScript on your landing page to determine which href location to send them to. 

 

Alternativly, there have been a few tutorials out there on using phasers antialias / smoothing, like here: http://www.sitepoint.com/modernize-your-html5-canvas-game/

 

Hope this helps in anyway shape or form

[mwatt]

Thanks for the input folks.  I like Rich's approach and I'll give it a shot.

 

To give a little more background, I have 3 pairs of background images that I want to fit to screen without letter boxing or distortion.  There are three pairs because I am supporting 3 aspect ratios: 3:4, 9:16 and 10:16.  

 

I need device pixel size to initialize Phaser and to calc the aspect ratio to use.  All of my images are quite large but are built to these three aspect ratios.   I am using SHOW_ALL and also scaling down the background sprite to match the division of screen pixels / image pixels for each of the height and width.

 

I use mainly device to pixel ratio (size plays a role above a certain threshold) to choose the other game image sizes.  I have 1X, 2X and 3X versions of all of those.  Naturally these sprites get scaled as well.

 

This is working on desktop but I am getting oddness in the actual devices.  I am suspecting that using window.screen dimensions is not cutting it, hence this post.

[Tom Atom]

Hi mwatt, I am still using my helper class and I am happy with it. I wrote article about it here: http://sbcgamesdev.blogspot.cz/2015/04/phaser-tutorial-manage-different-screen.html

 

In short: my target was to avoid letterboxing and stretching as much as possible. All our background images are designed with some additional parts, that are visible only on some aspects (see article). I can handle all aspects from iPhone to iPad without stretching (and without letterboxing) with single image. If the aspect is beyond this (> 1.77 or < 1.33) then stretching comes into play (but is is usually only so small it is not noticable). I position my gui controlls relative to screen / game borders while my game characters are positioned usually relative to screen center. The class also calculates some screen metrics, so it can tell you x and y offset from default aspect.

 You can see it in action in our older game Woodventure (http://sbc.littlecolor.com/woodventure/) - just change browser window size and reload (you can set also really wierd sizes to test it). And I am using it also for game we are finishing ... today! :-)

[MattMcFarland]

For most use cases all you need is window.innerWidth and window.innerHeight - both are available to you in modern browsers..

 

http://www.w3schools.com/jsref/prop_win_innerheight.asp

 

@megmut - Actually its very possible and has been for years (unless you are using some old obscure browser that won't support canvas anyway)