mobile full screen html

Question

Possible Duplicate:
HTML5 Canvas resize to fit window

I'm developing HTML5 game for mobile phone.

I want to stretch the canvas to take the full phone width and hieght.

I'm using this code but it not very accurate:

ourCanvas = document.getElementById('gameCanvas');
context = ourGameCanvas.getContext( '2d' );
ourCanvas.width = $(window).width();
ourCanvas.height = $(window).height();

Any suggestions?

score 0 · Answer 1 · answered Dec 10 '12 at 15:26

0

Looks like your canvas doesn't refresh it's width and height on window resize or orientationchange event:

$(window).on("resize", fitCanvas);
fitCanvas();

function fitCanvas() {
    var ourCanvas = document.getElementById('gameCanvas');
    context = ourGameCanvas.getContext( '2d' );
    ourCanvas.width = $(window).width();
    ourCanvas.height = $(window).height();
}

answered Dec 10 '12 at 15:26

Andreas Louv

46,145
13
104
123

the code is perfect with the PC browsers,BUT there are area on android browsers still not included !!! – Soliman Dec 10 '12 at 15:37
@Solieman If you detect wether or not the orientationchange event is available you can bind eater that or the resize – Andreas Louv Dec 10 '12 at 15:42
There is NO orientationchange,I'm using a browser that prevent it. – Soliman Dec 11 '12 at 09:49
Maybe this will help: http://stackoverflow.com/questions/1649086/detect-rotation-of-android-phone-in-the-browser-with-javascript – Andreas Louv Dec 11 '12 at 10:25

score 0 · Answer 2 · answered Dec 10 '12 at 16:10

0

.outerWidth()
.outerHeight()

?

And did you reset your layout? Like:

body, html, p, whatever { padding:0; margin:0; }

answered Dec 10 '12 at 16:10

b1nary

289
3
11

mobile full screen html

2 Answers2