HTML5 Full Screen on a Smartphone - how to do it ?

Monkey Targets Forums/HTML5/HTML5 Full Screen on a Smartphone - how to do it ?

semar

(Posted 2013) [#1]

Dear all,

when I browse with my smartphone, some web site 'pushes' up the address bar of the browser, hiding it. Dragging the page down, the address bar is shown again.

How to obtain this full-screen mode, or in general, how to 'force' the browser to full-screen mode ?

I guess I should change the MonkeyGame.html, but I don't know really how to.

Any help would be very appreciated.

Thanks in advance,
Sergio.

FelipeA

(Posted 2013) [#2]

You could check the source of this game. I made it with monkey and added a couple of things to the html file so it could run as a webapp for iOS.

Example

<!DOCTYPE html>

<html>
<head>
	<title>TossBoss</title>
	<meta name="author" content="Felipe Alfonso">
	<meta name="keywords" content="html5,gamedev,cellfishmedia,tossboss">
	<meta name="description" content="TossBoss, HTML5 Game!">
	<link rel="apple-touch-icon" sizes="57x57" href="ios/icon57.png" />
	<link rel="apple-touch-icon" sizes="114x114" href="ios/icon114.png">
	<link rel="apple-touch-icon" sizes="512x512" href="ios/icon512.png" />
	<link rel="apple-touch-startup-image" href="ios/splash.png" /> 
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
<style type="text/css">
body{
	height: 100%;
	overflow: hidden; /* keeps scrollbar off IE */
	font-family: arial,sans-serif;
	font-size: 13px;
	color: #000;
	background-color: #000;
	padding:0px;
	margin:0px;
	text-align:center;
}
canvas:focus{
	outline:none;
	position: absolute;
}

</style>
</head>

<body>
<canvas id="GameCanvas" onclick="this.focus();" oncontextmenu="return false;" width=640 height=480 tabindex=1></canvas><br>
<script language="javascript" >
	if(!(/Android|PlayBook|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)))
	{
		document.getElementById("GameCanvas").style.marginTop="20px";
		document.getElementById("GameCanvas").style.position="static";
	}
</script>
<script language="javascript" src="mojo.html5.gl.min.js">Javascript not supported!</script>
<script language="javascript" src="main.js">Javascript not supported!</script>

</body>
</html>

semar

(Posted 2013) [#3]

Hi ilovepixel, when I click on your link example I get a black page with this error message:

Monkey Runtime Error : [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: https://dl.dropboxusercontent.com/u/14445838/toss/TossBoss/tossboss.build/html5/main.js :: <TOP_LEVEL> :: line 1733" data: no]

FelipeA

(Posted 2013) [#4]

That probably was an error of an old html5-for-webapp module I made for this project. I've fixed it ( i hope ). I've tested it on safari on ipod 5 + safari console and android and works ok.
The important thing is the html file and the three last meta tags on the head tag.

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />

The rest is just testing how it looks on device.

semar

(Posted 2013) [#5]

Thanks ilovepixel.

Anyway, on my samsung galaxy (android) the browsers address bar is still shown in the page. The same happens with a pc..

By the way, how is intended to be played ? On a pc it works with the mouse, while on the smartphone the whole picture is dragged under the finger.

Sergio

FelipeA

(Posted 2013) [#6]

It was made to be played as a webapp ( saved on the phone ) on ios devices. On android the performance is horrible, at least on a galaxy s2.

To hide the navigation bar on mobile devices I use this:

window.scrollTo(0,1);

To run fullscreen on pc you can use this:

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Using_full_screen_mode

semar

(Posted 2013) [#7]

To hide the navigation bar on mobile devices I use this:
window.scrollTo(0,1);

Thanks ilovepixel ! Where should I use that statement ? In the .html5 file I guess:

<script language="javascript" >
window.scrollTo(0,1);
	if(!(/Android|PlayBook|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)))
	{
		document.getElementById("GameCanvas").style.marginTop="20px";
		document.getElementById("GameCanvas").style.position="static";



	}
</script>

Is that right ? Or should I import the 'dom' module, and use it as statement in the .monkey source code like:

Import dom

Function Main()
	window.scrollTo(0,1);
End

Otherwise, could you please post a code example ?

Regards,
Sergio.

FelipeA

(Posted 2013) [#8]

You can add it as an extern module for webapps and call it on monkey or add it to the html file. I would recommend making a simple html5-for-webapp module to handle events that only happen on mobile devices like multi touch or accelerometer.

David Casual Box

(Posted 2013) [#9]

It's an amazing sample.
One question, how are you doing to detect the screen orientation change?

SLotman

(Posted 2013) [#10]

Can you just set var RESIZEABLE_CANVAS=true; on the generated main.js? Wouldn't that work?

MikeHart

(Posted 2013) [#11]

Just check the deviceheight and/or width every so often.

David Casual Box

(Posted 2013) [#12]

It's work now :)
Just to mention that iOS7 is here, with some bugs... if you try the TossBoss sample from Sergio, you'll notice that rotate the device (or just wait few seconds...) will break the page, hiding half of the app. F... iOS7!!!

Sensei

(Posted 2013) [#13]

Does Autofit work in this instance? Might be worth looking into for orientation changes.

David Casual Box

(Posted 2013) [#14]

It works, but sometime the screen shift on the right...