How do I flexible scale: mobile & desktop?

  • I am wondering if the following is possible:

    Desktop opens html5 game (via dropbox for example) and the game is displayed in the center. Not full screen, because of the 480*320 resolution, which is somewhat low. (this is already working for me)

    But when a mobile phone opens the game, I would like to scale the game towards the edges of the screen, so that it is full screen or nearly full screen.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • There is an "is on mobile" condition..

    The browser object has a request fullscreen - action..

    Yeah.. should work..

  • Thanks, I was experimenting and it is great.

    I am still wondering if the following result can be achieved:

    on desktop: game is displayed in the center (somewhat small game)

    on mobile phone and tablet: game is scaled up towards the edges of the device.

  • You could set the"fullscreen in browser" option in the project properties to off, that way the game will be played within it's original frame on desktop..

    on any touch - is on mobile - browser request fullscreen..

    That way fullscreen can only be achieved on mobile..

  • You could set the"fullscreen in browser" option in the project properties to off, that way the game will be played within it's original frame on desktop..

    on any touch - is on mobile - browser request fullscreen..

    That way fullscreen can only be achieved on mobile..

    Ah yes, that is what I was trying.

    But full screen on mobile (via the browser object - I have tested all stretch scale options) is zoomed in or something. The game is unplayable - you can not see anything.

    So I was thinking that my solution is: perhaps there is some javascript code I need to find to scale up the frame of the game when displayed on Chrome Mobile.

    Edit: I just found this:

     in your HTML code, add the following meta in the <head> of your page:
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />[/code:sn6a8qyv]
    I have no experience with meddling with javascript, but the width and height-part seems as what I am looking for (the bold part, I mean)?
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)