Jump to content
Search Community

Help me improve this code to adapt mobile viewports to any dimension by using scaling

Halcyon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have got this snippet of gsap code working pretty well to adapt my 1280x768 webgame to almost any mobile viewport size. It's not perfect, but I think it's pretty close. I'm looking for any constructive advice or ways to improve this method as adapting viewport sizes is kind of a pain.

// disable all mobile dragging of webpage
$("html").on("touchmove", function(e){
    // only disable dragging of html element
    if(e.target===this){
        e.preventDefault();
    }
});
// make html page scaling originate from top-left corner
TweenMax.set("html", {
    transformOrigin:"0 0"
});
function resizeWindow(){
    var w=window.innerWidth;
    var h=window.innerHeight;
    // width less than 1280?
    if(w<1280){
        TweenMax.set("html",{scaleX:w/1280});
    }else{
        TweenMax.set("html",{scaleX:1});
    }
    // height less than 768?
    if(h<768){
        TweenMax.set("html",{scaleY:h/768});
    }else{
        TweenMax.set("html",{scaleY:1});
    }
}
$(window).on("resize", function(){
    // only do this for mobile devices
    if(isMobile===true){
        // do not resize if focusing on an input or the keyboard will squish the whole webpage
        if(inputFocus===false){
            resizeWindow();
        }
    }
});
Link to comment
Share on other sites

I think trying to scale the whole html element (page) would have an enormous impact on performance among other things. What I would advice is to have an inner container like 

<div class="mainContainer"></div> 

And include everything in there and scale that (if that is desired).

 

Also make sure to include the following meta tag in the head of the html page: 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0">

Also to find which is the correct ratio and size of the page try the following:

var w = window.innerWidth * window.devicePixelRatio,
    h = window.innerHeight * window.devicePixelRatio;

I hope this helps somehow. However since I struggled a lot with gaming my self I ended up using an excellent framework called Phaser.io which is rumored and petitioned into using GSAP library for its tweening engine.

  • Like 3
Link to comment
Share on other sites

+1 for Michael's recommendation on Phaser.io, which uses the awesome Pixi.js library. I will never attempt to build another game from scratch.
 
Viewport scaling can be real tricky because the aspect ratio can vary greatly across different devices. What I have done in the past is to scale the game's viewable area and the actual game content independently, creating a responsive layout. The view and the game content will scale at the same ratio until a certain aspect ratio is broken, at which point the viewable area will scale to the viewport's aspect ratio. This will eliminate the need to letterbox or crop parts of your game. However, this approach may not be ideal for games where you must maintain a certain aspect ratio, like in a platformer.
 
Here's some screenshots showing this technique in practice. Even when set to a ridiculous proportion, the game elements, shown in red by their bounding boxes, still maintain their original aspect ratio.
 

rws5jc.jpg

 

30j69aa.jpg

  • Like 2
Link to comment
Share on other sites

Why not just use a meta viewport tag like Michael71 suggested above. So you can set the width of your content to the width of the targeted devices width.

 

By using the meta viewport tag you allow the users device to zoom in / out your content with its native zoom functions, rather than trying to use CSS transforms to scale the content based on the viewport.

 

To scale to fit your content without using extra JS or media queries, then just set the width in the meta viewport tag to the width of your actual content markup (outer most div tag or wrapper) .

 

if you don't want to mess with media queries to assign different css layouts, than just set the meta viewport to the width of your content. Then when the page loads your game in the viewport it will automatically scale to fit your content.

 

The below would scale to fit your whole content to the devices width. This technique is usually done when you don't want to create different media queries or calculate width and height ratios with JS, but you still want your content to fit the whole page on any touch device.

 

For example.. if your games content is 960px .. then you would set your viewport meta tag to this:

:

<meta content="width=960" name="viewport">

:

And if you really want to disable zoom controls:

:

<meta content="width=960,user-scalable=0" name="viewport">

:

The above works on both Android and Apple IOS devices - cross browser. Be careful though if you add initial-scale=1.0, maximum-scale=1.0 .. you will over ride the automatic scale to fit the content since initial-scale sets the initial scale zoom level to 100% (1.0)

 

Resources:

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design

 

I hope this helps! :)

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...