jquery-mobile - jquery mobile does not remain on same page by device orientation change

Question

I have a jquery mobile app integrated with phonegap to deploy on android devices, with following markup in index.html file :

<div id="home" data-role="page">
     <div data-role="content">
          <a href="details.html?id=1">Details</a>
     </div>
</div>
<div id="about" data-role="page">
</div>

When I go to about page and change the device orientation, it redriects to 'home' page and does not remian on the current page.

also in home page 'pagecreate' event I check a condition and if it true, I change the page to about page, but I see that home page`s 'pagebeforeshow' event is fired, and I dont want it to happen.

$(document).on('pagecreate', '#home', function (e) {
    if (e) { 
        e.preventDefault(); 
    }

    if(condition){
        $.mobile.changePage( "#aboutus",null );
    }
    else
    {
        //
    }
});

$(document).on('pagebeforeshow', '#home', function (e) {
        if (e) { e.preventDefault(); }

});