Question

I am working on a jquery mobile app, where i want to display the splash screen for all devices including the ipod, iphone, android mobiles, web browsers.

I have Tried below code:

1.)

<script type="text/javascript">
 (function () {
  var a; if (navigator.platform === "iPad") {
     a = window.orientation === 90 || window.orientation === -90 ?
"_Startup_748x1024.png" : "Startup_768x1004.png"

 } else {
     a = window.devicePixelRatio === 2 ?
   "Startup_640x920.png" : "Startup_320x460.png"

 }
 document.write('<link rel="apple-touch-startup-image" href="' + a + '"/>') })()

The above code is not working with android mobiles and web browsers.

2.)

<div data-role="page" id="splash"> 
 @Html.Partial("_MobileHeader")
  <div class="splash">
        <img src="images/_Startup_748x1024.png" alt="startup image" style="width: 100%; height: 100%" />
    </div>
       <div data-role="content" id="pagecontent" data-theme="c">
    @RenderBody()
        </div>
    <!--End content div  -->
    @Html.Partial("_MobileFooter")
</div>

and the script that i have used is :

$(document).on('pageinit','#splash',function(){
setTimeout(function(){
    $.mobile.changePage("#pagecontent", "fade");
}, 4000);  });

with the above code both of the div get displayed together i want to display only the splash screen first and then the content of another div.

Please suggest me possible solution for the above problem any help would be appreciated.

Thanks in advance.

Answer 1

I have fixed this issue as follows:

1.) Created an action that is the default action, called when the mobile app is opened at the very first time, and in its view page Set
the image which is to be displayed based on the orientation of the
device,which is done by jquery.

2.) And then to redirect to the another action Or the at the main page after this splash screen added the below line in the head
section:

<meta http-equiv="refresh" content="4;URL='the link which you want to call after that'" />

From this the image will be displayed for the starting 4 seconds as mentioned in the “content” and then redirects to the URL specified.

And it is working on all devices. 🙂