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

Question

我想将平板电脑和移动设备 View 分开，我在应用程序的定义中选择它。但它失败了，运行应用程序后什么也没有发生。这是一段代码:

<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/ ，在 fiddler 上它可以工作，但在我的 PC 上却不行。

我是不是忘记了什么？

感谢您的帮助!

Answer 1

您是否尝试添加 CSS 定义:

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

就像你在 fiddle 中一样吗？