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();
}
}
});