Need template with phaser who scale correctly both with canvas+ and webview+


I’m desperate to have my game that fills the screen correctly with canvas + and webview +. I followed this template on github:

There is a ton of documentation on this subject and either I make a mistake in rewriting or the documentation is out of date. I can get a screen perfectly adapted in canvas + but not in webview +. And when webview + is adapted, canvas + is no longer! Can you help me with a simple example to have a screen on the whole page both in canvas + than in webview +


Spotted this in the forum, a fix for canvas games: Scaling Issue with WebView+


hi James,

thanks for your link, but i don’t success to implement correctly your function.
But fortunately i success personnaly with this code for portrait mode (hope it helps someone)
i have put two different colors (red and yellow) in background to see how the game is scalling.
works perfectly in canvas+ and webview+
To put a sprite at the middle of the screen use this :
this.sprite=this.add.sprite(,,‘my image’)

my index.html

<meta charset="utf-8" />
<link rel="shortcut icon" href="favicon.png" type="image/x-icon" />
body {
	margin: auto;
	display: table;
	position: absolute;
	top: 0px;
	left: 0px;
	padding: 0; margin: 0;
	background: #ffff00
<script src="cordova.js"></script>    
<script src="src/phaser.js"></script>
<script src="src/Boot.js"></script>
document.addEventListener("deviceready", function() {
		setTimeout(function() {
				}, 5000, false);
(function() {

 var safe_zone_height=2270
 var safe_zone_width=1480
 var w = window.innerWidth ;//* pixelRatio,
 var h = window.innerHeight ;//* pixelRatio;
 var lw, lh; //landscape width/height in pixels
 if ( h > w ) {
 lw = h;
 lh = w;
 } else {
 lw = w;
 lh = h;
 var aspect_ratio_device = lw/lh;

 var aspect_ratio_safe_zone = safe_zone_height / safe_zone_width;
 var extra_height = 0, extra_width = 0;
 if (aspect_ratio_safe_zone < aspect_ratio_device) {
 // have to add game pixels horizontally in order to fill the device screen
 extra_height = aspect_ratio_device * safe_zone_width - safe_zone_height;
 } else {
	 // have to add game pixels vertically
	 extra_width = safe_zone_height / aspect_ratio_device - safe_zone_width;
 var game = new Phaser.Game( safe_zone_width + extra_width, safe_zone_height + extra_height, Phaser.CANVAS, 'game');
 game.state.add('Boot', Ball.Boot);


my boot.js

var Ball = {
Ball.Boot = function(game) {};
Ball.Boot.prototype = {
	preload: function() {
	create: function() { = Phaser.ScaleManager.SHOW_ALL; = true; = true; = '#ff4000'


Here an updated link of my template:


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.