Please help! Cant get my phaser game to work on iPhone

I have a Phaser game that I have hosted on my website. It works perfectly in Chrome and Safari on a desktop. I want it mobile friendly, so I added the mobile code in my index and boot.js files, but it doesn’t work on my iPhone when I try to play it on website through my Iphone. When I view it through my phone, it crashes right after the boot.js file. Works perfectly on desktop, but crashes on my iPhone. Can someone help me get this to work on mobile? Below is my code for my index file and my boot.js file.

Index file:

<!DOCTYPE html>
<meta charset="utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0,
                               maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="HandheldFriendly" content="true" />

<title>Keytar Kitty!</title>

<script type="text/javascript" src=""></script>
<script type="text/javascript" src="superpop_assets/phaser-state-transition-plugin.min.js"></script>

@import url('');
@import url('');

<script type="text/javascript" src="superpop_assets/splash.js"></script>
<script type="text/javascript" src="superpop_assets/splash2.js"></script>
<script type="text/javascript" src="superpop_assets/gameOver.js"></script>
<script type="text/javascript" src="superpop_assets/main.js"></script>
<script type="text/javascript" src="superpop_assets/main2.js"></script>
<script type="text/javascript" src="superpop_assets/main3.js"></script>
<script type="text/javascript" src="superpop_assets/main4.js"></script>
<script type="text/javascript" src="superpop_assets/main5.js"></script>
<script type="text/javascript" src="superpop_assets/main6.js"></script>
<script type="text/javascript" src="superpop_assets/main7.js"></script>
<script type="text/javascript" src="superpop_assets/main8.js"></script>
<script type="text/javascript" src="superpop_assets/main9.js"></script>
<script type="text/javascript" src="superpop_assets/main10.js"></script>
<script type="text/javascript" src="superpop_assets/main11.js"></script>
<script type="text/javascript" src="superpop_assets/main12.js"></script>
<script type="text/javascript" src="superpop_assets/main13.js"></script>
<script type="text/javascript" src="superpop_assets/main14.js"></script>
<script type="text/javascript" src="superpop_assets/main15.js"></script>
<script type="text/javascript" src="superpop_assets/main16.js"></script>
<script type="text/javascript" src="superpop_assets/main17.js"></script>
<script type="text/javascript" src="superpop_assets/main18.js"></script>
<script type="text/javascript" src="superpop_assets/main19.js"></script>
<script type="text/javascript" src="superpop_assets/main20.js"></script>
<script type="text/javascript" src="superpop_assets/main21.js"></script>
<script type="text/javascript" src="superpop_assets/menu.js"></script> 
<script type="text/javascript" src="superpop_assets/load.js"></script> 
<script type="text/javascript" src="superpop_assets/boot.js"></script>
<script type="text/javascript" src="superpop_assets/config.js"></script>


	background-color: black;


	font-family: 'Press Start', cursive;
	visibility: hidden;


	font-family: 'Princess Sofia', cursive;
	visibility: hidden;
margin: 0;
padding: 0; }


<body class="yes">

<div id="gameDiv"> </div>

<p class="hiddenText">.</p>
<p class="hiddenText2">.</p>

boot.js file:

var bootState = {
preload: function () {
// Load the image
game.load.image('progressBar', 'superpop_assets/progressBar.png');
game.load.image('madmodemlogo', 'superpop_assets/madmodemlogo.png');
game.load.image('rrrlogo', 'superpop_assets/rrrlogo.png');'menusong', 'superpop_assets/menusong.mp3');
create: function() {
// Set some game settings game.stage.backgroundColor = '#3498db'; game.physics.startSystem(Phaser.Physics.ARCADE);
              // Start the load state
              game.stateTransition =;

    //game.plugins.screenShake =;

 // If the device is not a desktop, so it's a mobile device
if (!game.device.desktop) {
// Set the type of scaling to 'show all' 
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
          // Add a blue color to the page, to hide the white borders we might have
 = '#3498db';
          // Set the min and max width/height of the game
          game.scale.minWidth = 250;
          game.scale.minHeight = 170;
          game.scale.maxWidth = 1000;
          game.scale.maxHeight = 680;
          // Center the game on the screen
game.scale.pageAlignHorizontally = true; 
game.scale.pageAlignVertically = true;
          // Apply the scale changes




  duration: Phaser.Timer.SECOND * 2,
  ease: Phaser.Easing.Exponential.InOut,
  properties: {
    alpha: 0,
    scale: {
      x: 1.6,
      y: 1.6


While this post was a while ago, this may help you out in debugging.

You can debug the browser on your mobile and see what is wrong.

Check out this SO post for more information