suggestion for cross device "splash" image

[frequent]

I have been using a lot of mobile-boilerplate things lately and wanted to share something back. Maybe useful.

Originally I was using the splash image as suggested in #94, but I never really managed to get it to work even across different iOS devices (never mind all the resizing/turning required).

So now I'm using this and am quite happy with it:

<script type="text/javascript">
      // get dimensions
      var screenSize = Math.max(screen.width,screen.height),x, dir,
             w=screen.width, h=screen.height, o = window.orientation;

      // just get portrait / landscape
      if ( navigator.platform ==="iPad" ){
           dir = ( o == 0 || o == 180)  ? "P" : "L";
           } else {
           dir = ( w < h || ( o == 0 || o == 180) ) ? "P" : "L";
           }

      // I'm serving responsive images, but could be dpi, too
      // the orientation "dir" goes into the file url
      if ( screenSize < 320 ){
           x = "_your_image_url_size_S_" & dir & ".jpg";
      } else if ( screenSize > 320 && screenSize <= 767 ){
           x = "_your_image_url_size_M_" & dir & ".jpg";
      } else if ( screenSize > 768 && screenSize <= 1279 ){
           x ="_your_image_url_size_L_" & dir & ".jpg";
      } else {
           x ="_your_image_url_size_XL_" & dir & ".jpg";
      }

      // (1) add a CSS rule = if there is a class on body/html that is 
      // removed after the page renders, add this rule to this element. 
      // I'm using an initHandler class, that is removed once the app 
      // has loaded, which will also hide the splash image.

     // (2) also, depending on user settings, I'm attaching this rule to 
     // the body of the first page, too. This way, the loading screen can 
     // fluently lead onto the landing page

    document.styleSheets[0].insertRule('.initHandler:before { 
            background: url('+x+') no-repeat center center fixed; 
            -webkit-background-size: 100%;
            -moz-background-size: 100%; 
            -o-background-size: 100%; 
            background-size: 100%;
            -webkit-background-size: cover; 
            -moz-background-size: cover; 
            -o-background-size: cover; 
            background-size: cover;  
            }', 0);
</script>

The background is added on :before so it doesn't clutter anything else. I'm first setting 100% on background-size for all browsers that don't support cover (iPad 1 in portrait for example). Then the cover overwrites it for all supporting browsers.

Works quite nicely, isn't limited to iOS and is easier to handle. Feel free to use, if you like.

Update:
Forgot a CSS rule for the backgound. This must be set, too to make it work:

    .initHandler:before { 
            width: 100%; 
            position: absolute; 
            top: 0; 
            bottom: 0; 
            left: 0; 
            right: 0; 
            display: block; 
            height: 115%;  // depends on preference
            z-index: 999999;  
            background-color: white; 
            content: "initializing..."; // loading message
            text-align: center; 
            color: #bbb; 
            text-shadow: none; 
            line-height: 150px; 
            vertical-align: bottom; 
            }

[alexgibson]

Link to an online demo would be useful here?

[frequent]

Here is a quick demo using the boilerplate template index.html.

I have put all the code on the page (extra css-rule|script to add css-rule|remove initHandler class). Timeout is set to 3000ms. Tried on HTC Android 2.3, iPad1, Firefox PC.

Please note:
The insertRule will only work from IE9+, so to be really cross-platform it would require some fiddling with addRule/insertRule.

[alexgibson]

Thanks for the link - could have some use cases for certain apps, but I don't think this really fits as a general use case for the majority of web apps. The splash images in iOS web apps display until the DOMContentLoaded event fires, and help to give web apps a more iOS 'native' familiarity that is suitable for the platform.

I don't think this same behaviour really belongs in the browser, it feels a bit like an advertisement to me? But if you can get your code into a format suitable so it can be used as a JS plugin, we could include a link to it in the wiki?

[frequent]

sounds good. will do. give me some time though.