kendo-ui - 在平板电脑或移动设备内容之间切换

Question

我想将 Tablet 和 Mobile 视图分开，我在应用程序的定义中选择它。但它失败了，一旦我运行应用程序，什么也没有发生。这是一段代码：

<div id="phoneApp">
   <div data-role="view" id="home">
       <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="#home" data-icon="home">Home</a>
             <a href="#about" data-icon="info">About</a>
           </div>
       </div>
   </div>
</div>
<script>
    var app = new kendo.mobile.Application($("#phoneApp"), {transition: "slide", layout: "phoneDefault" });
</script>

我试图重现这个例子： http: //jsfiddle.net/toddanglin/YGUeJ/5/，在提琴手上它可以工作，在我的电脑上它没有。

我是不是忘记了什么？

谢谢您的帮助！

Answer 1

您是否尝试添加 CSS 定义：

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

就像你在小提琴中一样？