title: How to develop for tablet using Worklight?
body: <p>I have develop my UI under <code>common</code> folder, then I create a skin for my tablet and name it as <code>android.tablet</code>. But when I run it on my tablet simulator, it looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/XgYhy.png" alt="enter image description here"></p>
  
  <p>I use below code in <code>skinLoader.js</code>:</p>
  
  <pre><code>var userAgent = navigator.userAgent;
  var skinName = "default";
  //android tablet
  if(userAgent.toLowerCase().indexOf("android") != -1 &amp;&amp;
      userAgent.toLowerCase().indexOf("mobile") == -1){
      skinName = "android.tablet";
      alert("tablet!");
  }
  //android phone
  else if(userAgent.toLowerCase().indexOf("android") != -1 &amp;&amp;
      userAgent.toLowerCase().indexOf("mobile") != -1){
      skinName = "default";
      alert("default!");
  }
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div data-role="page" id="homePage" class="fullWidth"&gt;
      &lt;div data-role="header" data-tap-toggle="false"&gt;
          &lt;div class="ui-title"&gt;...&lt;/div&gt;
      &lt;/div&gt;
      &lt;div data-role="content" style="text-align: center"&gt;
          &lt;a href="#" data-role="button" id="login" class="fullWidth"&gt;Login&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.fullWidth{
      width: 100% !important;
  }
  </code></pre>
  
  <p>Why it can't be full screen? Any code I lack?</p>