There is an HTML5 game was made using GameMaker Studio. When I open it on mobiles (iOS and Android), it uses a wrong resolution.
An example. A game uses 960*640:
But on the phone I see this:
Also there you can see browser's resolution which was returned by the engine. As you can see, it's x3 times lower than actual resolution (640*360 instead of 1920*1080). Of course my first mind was that it's an engine's bug. But I checked it using HTML/JS and there were same values. One person on StackOverflow mentioned viewport meta and seems like it may help.
I looked into index.html generated by GMS, and there was a line
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I have no experience with HTML/etc, so I just tried some values:
<meta name ="viewport" content="width=device-width" />
<meta name ="viewport" content="width=device-width, height=device-height" />
<meta name ="viewport" content="width=960, height=640" />
<meta name ="viewport" content="width=640, height=960" />
and some other.
But it is not solved the problem. Although sometime the result was better.
Is there any magic to make the game work as well?
P.S. If it would help:
You can see index.html there
Compiled project there (as I understand, it won't work from local disk)
P.P.S. I use Chrome and Samsung Internet on Android and Safari + Chrome on iOS.
P.P.P.S. I know about window.devicePixelRatio, but I don't know how it may be used there.
upd: Even with just content="width=device-width" it shows the whole picture, but the picture has low vertical resolution. For example, 960*420 (on 1920*1080 display) in landscape mode. Of course then the game looks terrible. If I flip device to portrait orientation then the browser returns 960*1494. The image looks perfect, but it too small (takes only about 1/3 of the display). So I need the vertical resolution of the browser was bigger (or equal) than the height of the game canvas.
upd2: Was found solution
<script type="text/javascript">
var canvas = document.getElementById("canvas");
function canvas_resize(){
canvas.width = 960 * window.devicePixelRatio;
canvas.height = 640 * window.devicePixelRatio;
}
window.addEventListener("orientationchange", canvas_resize);
document.addEventListener("DOMContentLoaded", function () {
canvas_resize();
})
</script>
but there are two problems:
It works on Android, but it doesn't work on iOS (iOS shows the image with very low resolution). What solution would work on iOS?
Browser should to request for desktop version of the site ("Request desktop site" option). When browser requests a mobile version of the site, it also always uses low resolution. Is there way to avoid it?
Related
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
For an application, I need to send chrome on android into full-screen mode.
I know that I need to use the Fullscreen API, which involves calling Element.webkitRequestFullscreen().
So, I call this on document.body as I want everything to be put into fullscreen mode and take advantage of all the phone screen.
However the problem is that the screen is resized/loses quality. This severely mucks up my application (which is drawing to a canvas for virtual reality) because I need all the resolution I can get!
To demonstrate the screen has been enlarged and lost drawable pixels, see this from the console of inspecting my phone:
window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640
Clearly, innerWidth and innerHeight are being reduced by something when entering fullscreen, but I can't figure out what.
I have tried different resizing of the canvas which is contained in the body but to no avail.
But what I thought would be the solution would be to add a viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
and I also tried setting a definitive content width:
<meta name="viewport" content="width=900, initial-scale=1">
but neither of these seemed to have any effect on the behaviour of the webpage, so I am not sure if I am placing them wrong (in the <head>) or if I have the syntax wrong, but they don't change anything.
The solution (more of a workaround) was to turn my website, that I was opening in Chrome on my phone, into a Progressive Web App.
This is as simple as writing a short manifest.json file in the root directory then once the website is open in Chrome, tapping on "Add to Home Screen".
Now the manifest.json file has an option: display: fullscreen.
This does not reduce the working space resolution and was just the fix I needed.
Furthermore, considering my goal of a VR experience, it makes more sense for this to be a web app than a website that you have to fuss around with in Chrome.
I have mobile optimised several sites in the same way using media queries - most are working fine on phones but two insist on always detecting a screen.width of 800px, no matter how small the actual device is.
Working correctly:
www.accountex.co.uk, www.legalex.co.uk, www.takeawayexpo.co.uk, www.streetfoodlive.co.uk
Detecting wrong screen size but only on mobile devices:
www.greatbritishbusinessshow.co.uk, www.bstartup.com
Even though the methods used are almost identical. The above two show correctly on all online mobile simulators, BUT use the media query for a screen width of 800px when loaded on actual mobile devices even when the device is 320x480 or otherwise very small.
Using console.log or alert these two sites always return 800px as the when alert(screen.width) is invoked - no idea how this can happen on a tiny device!
Thanks for your help!
use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">
I developed an app in phonegap build and going to publish as i see it work nicely in iphone resolution. When the time i try with samsung note, i found out the screen resolution not so good as the application look small and minimized everything. How can i scale the application and fit to the screen as how it fit to iphone screen? Thanks for reply.
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1.0, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
If you want resolve this without using native code, e.g. if you're using Phonegap build service, you can set target-densitydpi=160 or some other value. This will will set the dpi (dots per inch) for the device. This way the content will be sized similarly across devices. Standard values:
Low res: target-densitydpi=120
Medium res: target-densitydpi=160
High res: target-densitydpi=240
As I understand it, you can use any value between 70-400.
Word of caution: I've just made use of this on a Phonegap app of my own, and am experiencing troubles with un-clickable areas, which I'm currently researching. My app is a little complex and heavy on the DOM, so I'm not sure if this will be a problem for you. Just make sure to test all click/tap events extensively after implementing this.
$(document).ready(function() {
$('meta[name=viewport]').attr('content','width=1024, user-scalable=no');
});
Seem to work for disabling the user scaling after the correct scaling have been applied
I'm having trouble fitting a site to the iphone's screen dimensions.
What I am doing is the following: I have a slideshow with a few pictures running fullscreen in the back of the page and and little text on top.
When I set up the slideshow I do the following:
$('#bg').css('width', window.innerHeight).css('height', window.innerWidth);
Then I insert the Slideshow and scale and crop the pictures accordingly. This works perfectly fine in all desktop based browsers. Yet, the iPhone does not return its actual screen size but a value of 5000 so I get a rather big slideshow. The rest of the layout seems to render perfectly fine according to the given CSS.
I do know about the viewport "thing" with the iPhone and have already read this: http://developer.apple.com/library/safari/#documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html which led me to inserting the following meta-tag:
<meta name="viewport" content = "user-scalable=no, initial-scale=1" />
Yet again, this does not make any difference, the iPhone will still return a dimension of 5000px.
Anyone can tell me what I am doing wrong? Thanks a lot!
Ok, so what did the trick for me was using this combination of meta-tags:
<meta name="viewport" content="user-scalable=no, width=device-width" />
Try width=device-width in the meta tag - and make sure you dont have any other elements that are 5000px wide.