Universal Kendo UI Mobile App

Method for initializing a phone or tablet app depending on the platform with Kendo UI Mobile

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.621/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.621/js/kendo.all.min.js"></script>
<div id="tabletApp" style="display:none;">
    <div data-role="splitview">
        <div data-role="pane" id="left" data-layout="leftLayout">
            <div data-role="view">
                LEFT
            </div>
            
            <div data-role="layout" data-id="leftLayout">
                <div data-role="header">
                  <div data-role="navbar">
                      TEST APP
                  </div>
                </div>
            </div>
        </div>
        <div data-role="pane" id="right" data-layout="rightLayout">
            <div data-role="view">
               RIGHT
            </div>
            
            <div data-role="layout" data-id="rightLayout">
              <div data-role="header">
                  <div data-role="navbar">
                      &nbsp;
                  </div>
              </div>
            </div>
        </div>        
   </div>
</div>
<div id="phoneApp" style="display:none;">
   <div data-role="view">
       <h1>Phone Home</h1>
   </div>
   <div data-role="view" id="about">
       <h1>Phone About</h1>
   </div>
   <div data-role="layout" data-id="phoneDefault">
       <div data-role="header">
          <div data-role="navbar">
                Phone App
          </div>                       
       </div>
       <!--Content--> 
       <div data-role="footer">
           <div data-role="tabstrip">
             <a href="" data-icon="home">Home</a>
             <a href="#about" data-icon="info">About</a>
           </div>
       </div>
   </div>
</div>

CSS

body, html {
 margin:0;   
    height:80%;
    width:100%;
}

JavaScript

$(function() {
    var app,
    //Must be mobile and tablet
    isTablet = kendo.support.mobileOS && kendo.support.mobileOS.tablet,
        appElement = null,
        appLayout = null;

    console.log("mobileOS Info/isTablet", kendo.support.mobileOS, isTablet);

    appElement = (isTablet) ? $("#tabletApp") : $("#phoneApp");
    appLayout = (isTablet) ? null : "phoneDefault";

    app = new kendo.mobile.Application(appElement, {
        layout: appLayout,
        transition: 'slide'
    });
    
    //Adjust visibility of proper app container
    appElement.show();
});