title: meta name="viewport" content="width=device-width" Is not working with Kendo UI Mobile
body: <p>I am using Kendo UI Mobile framework and I have a <code>min-width: 768px</code> CSS class assigned to one of my <code>views</code> because I have table data that can't be compressed anymore. The view shows correctly on a iPad, but when I look at it in a 7&quot; Android Tablet, the view has horizontal scrolling. I need the view to auto zoom out so that the entire view is visible.</p>
  <p>I can't figure out why this won't work.</p>
  <p>Here is my header Meta Tag:<br/>
  <code>&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;&quot; /&gt;</code></p>
  <p>Here is my kendo UI view:<br/></p>
  <pre><code>&lt;div data-role=&quot;view&quot; id=&quot;main&quot;&gt;
      &lt;div class=&quot;headerWrapper&quot;&gt;
          &lt;div class=&quot;mainHeaderStyleLeft&quot;&gt;
              &lt;img src=&quot;Images/logo.png&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;mainHeaderStyleRight&quot;&gt;
              &lt;div class=&quot;mainMenuButton&quot;&gt;&lt;img src=&quot;Images/MenuBttnUnselected.png&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;checklistMenuButton&quot;&gt;&lt;img src=&quot;Images/MenuBttnUnselected.png&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;reportingMenuButton&quot;&gt;&lt;img src=&quot;Images/MenuBttnUnselected.png&quot;&gt;&lt;/div&gt;
              &lt;div class=&quot;trainingMenuButton&quot;&gt;&lt;img src=&quot;Images/MenuBttnUnselected.png&quot;&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;   
  &lt;/div&gt;
  </code></pre>
  <p>And my view css is simple:<br/></p>
  <pre><code>#main {
      min-width: 768px;
  }
  .mainMenuButton {
      
      margin-left: 230px;
      float: left;
  }
  .mainMenuButton img{
      width: 100px;
      height: 100px;
      margin-top: 15px;
  }
  .checklistMenuButton {
      margin-left: 10px;
      float: left;
  }
  .checklistMenuButton img{
      width: 100px;
      height: 100px;
      margin-top: 15px;
  }
  .reportingMenuButton {
      margin-left: 10px;
      float: left;
  }
  .reportingMenuButton img{
      width: 100px;
      height: 100px;
      margin-top: 15px;
  }
  .trainingMenuButton {
      margin-left: 10px;
      float: left;
  }
  .trainingMenuButton img{
      width: 100px;
      height: 100px;
      margin-top: 15px;
  }
  </code></pre>