HTML5/JS Website Not Display Properly On Android?

[JeZxLee]

HTML5/JS Website Not Display Properly On Android?

 

Hi,

 

We have made significant changes to our HTML5/JS website.

The website now has proper frame rate limiter and resizes while maintaining aspect ratio.

It still works 100% on all browsers on Windows/Linux/Mac OS X,

but it is now not displaying properly on our Android smartphone and tablet?

 

Here is the URL to the website:

http://www.16bitsoft.com

 

Here is source code:

<div id="container" style="border:0px solid; position:absolute; left:50%; top:50%; width:900px;    margin-left:0px; height:700px; margin-top:0px; margin-right:0px; margin-bottom:0px;"">    <canvas id="ScreenCanvas" width="900" height="700" style="z-index: 0"    >ERROR: Your Internet browser does not support HTML5(Get Mozilla Firefox or Google Chrome browser).    </canvas></div>

window.requestAnimFrame = function(){    return    (        window.requestAnimationFrame       ||        window.webkitRequestAnimationFrame ||        window.mozRequestAnimationFrame    ||        window.oRequestAnimationFrame      ||        window.msRequestAnimationFrame     ||        function(/* function */ draw1)        {            window.setTimeout(draw1, 1000 / 60);        }    );}();//--------------------------------------------------------------------------------------------------------------var fps = 60;function draw(){    setTimeout(function()    {        window.requestAnimFrame(draw);        gameLoop();    }, 1000 / fps);}

    window.addEventListener('resize', BrowserResize, false);

function BrowserResize(){var widthToHeight = 9 / 7;var browserWidthTemp;var browserHeightTemp;    var canvas = document.getElementById('ScreenCanvas');    BrowserWidth = window.innerWidth;    BrowserHeight = window.innerHeight;    var newWidthToHeight = BrowserWidth / BrowserHeight;    browserWidthTemp = BrowserWidth;    browserHeightTemp = BrowserHeight;     if (newWidthToHeight > widthToHeight)    {        // window width is too wide relative to desired game width        browserWidthTemp = browserHeightTemp * widthToHeight;        canvas.style.height = browserHeightTemp + 'px';        canvas.style.width = browserWidthTemp + 'px';    }    else    {        // window height is too high relative to desired game height        browserHeightTemp = browserWidthTemp / widthToHeight;        canvas.style.width = browserWidthTemp + 'px';        canvas.style.height = browserHeightTemp + 'px';    }    canvas.style.marginTop = (-browserHeightTemp / 2) + 'px';    canvas.style.marginLeft = (-browserWidthTemp / 2) + 'px';        BrowserWidth = browserWidthTemp;    BrowserHeight = browserHeightTemp;}

Here is a photo of how the website looks on both our Android smartphone and tablet:

 

Any help would be appreciated, thanks!

 

JeZxLee

16BitSoft Inc.

Video Game Design Studio

www.16BitSoft.com

[JUL]

Dumb question:

 

Why do you make your entire website with canvas ?

 

Is it because you don't feel comfortable with traditional HTML/CSS/JS, or is there an other reason behind it making it worth the hassle ?

 

 

 

I mean, you know that what you're doing here is borderline heresy right ?

 

 

Btw:

 

window.addEventListener('resize', BrowserResize, false);

 

That's why I guess.

There's no resize occuring, so, your function isn't triggered.

[realVR]

I am on a 10 inch tablet right now, and could not tap start or any other buttons. This is android tablet.