• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 HTML5 scales beautifully on desktop browsers, but the resolution is completely wrong (3-4x too small) in iOS and Android browsers!

VenomSX

Member
Hi all,

I've been following the tech blog article on HTML5 scaling, and to my delight, it has worked great for my HTML5 game. However, it only seems to work on desktop browsers. When I try to test the game on my iPhone 7 iOS (12?) Safari or my partner's Samsung S9 with Chrome, the game viewports seem to change to something incredibly small. Around 3-4 times as small as the resolution of the actual phones. The iPhone 7 I believe is 1334x750 and the S9 is 2960x1440. What I'm getting are values like 375x555 on my iPhone. Bizarre! This makes the games unplayable due to the viewport being so tiny.

It seems that window_get_width() and display_get_width() (I've tried both) return wrong values for the screen/browser resolution. WHY? They work perfectly on my desktop.

This is a new account, but I've been part of the GMC since 2009. I love GM so much so that I purchased the mobile modules and the HTML5 with hopes to publish games to those platforms. But at this stage, it's looking like I won't be doing any of that.

Please can someone suggest what might be the problem. I can post code, but it's pretty much the exact same script as the one featured in the YYG tech blog.

Thanks.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
It seems that window_get_width() and display_get_width() (I've tried both) return wrong values for the screen/browser resolution. WHY? They work perfectly on my desktop.
Because the browser lies to you about the resolution for various compatibility purposes. You'll need a tiny bit of JS for devicePixelRatio (search for that here).
 

VenomSX

Member
Aha! That explains it. I really can't believe this hasn't been mentioned more.

I'll have a search around and see if I can find the solution. I'm not familiar with JS at all, so will I still be able to do this?
 

VenomSX

Member
Because the browser lies to you about the resolution for various compatibility purposes. You'll need a tiny bit of JS for devicePixelRatio (search for that here).
I've found this snippet of code. Is this what I'm looking for by any chance? How do I implement this into my game if it's Javascript?

Is this code similar to the solution offered by TV's Mobility Engine? I'd rather not buy an extra extension if I don't absolutely have to.


EDIT: just tried the method shown here: https://forum.yoyogames.com/index.p...xel-ratio-in-mobile-browser.48628/post-300584

Didn't work. Was that the tiny bit of JS you were referring to?
 
Last edited:

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
I've found this snippet of code. Is this what I'm looking for by any chance? How do I implement this into my game if it's Javascript?

Is this code similar to the solution offered by TV's Mobility Engine? I'd rather not buy an extra extension if I don't absolutely have to.


EDIT: just tried the method shown here: https://forum.yoyogames.com/index.p...xel-ratio-in-mobile-browser.48628/post-300584

Didn't work. Was that the tiny bit of JS you were referring to?
Yes. I suppose that it's a bit more of stumbling point than it looks so I assembled a small sample project:
 

Gunner

Member
Because the browser lies to you about the resolution for various compatibility purposes. You'll need a tiny bit of JS for devicePixelRatio (search for that here).
Hmm weirdly enough I was able to accomplish exactly this with pure GML?

I remember it scaled beautifully across all devices.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Hmm weirdly enough I was able to accomplish exactly this with pure GML?

I remember it scaled beautifully across all devices.
The subject of the example and this topic is in achieving correct pixel density on devices that report lowered resolution to pages. I don't believe that you can retrieve devicePixelRatio via pure GML, so let me know if you manage to find your old notes.
 

Homunculus

Member
Well you do have display_get_dpi_x and display_get_dpi_y, but I'm not sure how they behave on the HTML5 module and if they can be used to this purpose. Getting the devicePixelRatio is so trivial though that it's probably more convenient anyways.
 

YellowAfterlife

ᴏɴʟɪɴᴇ ᴍᴜʟᴛɪᴘʟᴀʏᴇʀ
Forum Staff
Moderator
Well you do have display_get_dpi_x and display_get_dpi_y, but I'm not sure how they behave on the HTML5 module and if they can be used to this purpose.
I don't think they behave at all, looking at generated JS in debug mode (declared as 96 and never re-assigned)1586709634090.png
 
Top