Mobile displaying fails

[DNL]

EDIT:

I already solved the issues. About the html functions that phaser was unable to call using Firefox browser I change how to define them. Instead of:

var changeFullScreen = function(){

actions();

}

I changed for:

function changeFullScreen (){

actions();

}

 

 

 

Hello,

I wanted to create a game that appears with its default size in desktop vesion (800x600). In mobile version should be seen in fullscreen and resized to the device resolution.

It is defined:

this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL 

Canvas is inside a div and it is defined with one of the following classes:

.desktop{ position:relative; }

.mobile{     width:100%;
                height:100%;
                position:fixed;
                top:0px;
                left:0px;
                background-color: black; }

Following the tutorial http://www.emanueleferonato.com/2015/04/23/how-to-lock-orientation-in-your-html5-responsive-game-using-phaser/ I setted in boot state the listeners to show a"turn around image", it hide o show the image of a div: 

this.game.scale.forceOrientation(true, false,);
this.game.scale.enterIncorrectOrientation.add(this.handleIncorrect);
this.game.scale.leaveIncorrectOrientation.add(this.handleCorrect);  

handleIncorrect = function(){
show_the_div_with_turn_image();
}  

handleCorrect = function(){
hide_the_div_with_turn_image();
}

When the page is loaded , with a javascript I set the game with it screen configuration:

window.onload = function(){
                if( (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|lumia|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test((navigator.userAgent||navigator.vendor||window.opera).substr(0,4))) ){
                   define_the_class_of_the_div_for_mobile();
                }else{
                   define_the_class_of_the_div_for_desktop();
                }
               change_size_of_the_canvas_container_div();
}

The game, on the top right position has a button for resizing the screen size. That button change the class of the canvas div. (.mobile or .desktop) so the canvas is streched depending the size of its div container.

I checked the game and with my PC using Chrome it works delightfully.

I can't say the same using Firefox. When I click the rize button it doesn't call the javascript function allocated in the html file:

var fullScreen = function(){
    add_the_resize_button_on_canvas();
    //This next function is not called using Firefox!
    entrarPantallaCompleta();  
}

In the html there is:

entrarPantallaCompleta = function (){
          change_the_class_of_canvas_div()  
        }  

The other problems I found are:

- In android devices I can't not see the canvas.
- In Windows Phone It show the "turn around screen image" when the page is charged with device in horizontal orientation. Also it doesn't load the game in full screen size.

 

What I'm doing wrong?

Thanks

DNL

[DNL]

I got some updates!

I edited the first post