我想根据 facebook 创建一个面板，所以我尝试了此处显示的示例 ，面板长度大于页面。当我在 crome 和 firefox 浏览器中运行示例时，它工作正常，但是当我尝试在模拟器中运行它时，页眉和页脚向左移动一点，面板在页眉和页脚下打开，内容页面向右移动. 这是我为创建右侧面板返回的代码：
<body>
<div data-url="panel-fixed-page1" data-role="page" class="jqm-demos ui-responsive-panel" id="panel-fixed-page1">
<div data-role="header" data-theme="b" data-position='fixed'>
<h1>Fixed header</h1>
<a href="#nav-panel" data-icon="bars" data-iconpos="notext" id='menu' >Menu</a>
<a href="#add-form" data-icon="gear" data-iconpos="notext" id='add'>Add</a>
</div><!-- /header -->
<div data-role="content" class="jqm-content">
<h1>Panels</h1>
<h2>Fixed positioning</h2>
<p>This is a typical page that has two buttons in the header bar that open panels. The left panel has the reveal display mode. The right panel opens as overlay. For both panels we set <code>data-position-fixed="true"</code>. We also set position fixed for the header and footer on this page.</p>
<p>The left panel contains a long menu to demonstrate that the framework will check the panel contents height and unfixes the panel so its content can be scrolled. In the right panel there is a short form that shows the fixed positioning.</p>
<h2>Responsive</h2>
<p>To make this responsive, you can make the page re-flow at wider widths. This allows both the reveal panel menu and page to be used together when more space is available. This behavior is controlled by CSS media queries. You can create a custom one for a specific breakpoint or use the breakpoint preset by adding the <code>class="ui-responsive-panel"</code> to the page container. We have added this class on this demo page.</p>
<a href="./" class="jqm-button" data-ajax="false" data-role="button" data-mini="true" data-inline="true" data-icon="arrow-l" data-iconpos="left">Back to Panels</a>
<div data-demo-html="#panel-fixed-page1" data-demo-css="true"></div><!--/demo-html -->
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h4>Fixed footer</h4>
</div>
<div data-role="panel" data-theme="a" id="nav-panel" data-display="reveal" data-position-fixed="true">
<ul data-role="listview" data-theme="a" class="nav-search">
<li data-icon="delete"><a href="#" data-rel="close">Close menu</a></li>
<li><a href="#panel-fixed-page2">Accordion</a></li>
<li><a href="#panel-fixed-page2">AJAX Navigation</a></li>
<li><a href="#panel-fixed-page2">Autocomplete</a></li>
<li><a href="#panel-fixed-page2">Buttons</a></li>
<li><a href="#panel-fixed-page2">Checkboxes</a></li>
<li><a href="#panel-fixed-page2">Collapsibles</a></li>
<li><a href="#panel-fixed-page2">Controlgroup</a></li>
<li><a href="#panel-fixed-page2">Dialogs</a></li>
<li><a href="#panel-fixed-page2">Fixed toolbars</a></li>
<li><a href="#panel-fixed-page2">Flip switch toggle</a></li>
<li><a href="#panel-fixed-page2">Footer toolbar</a></li>
<li><a href="#panel-fixed-page2">Form elements</a></li>
<li><a href="#panel-fixed-page2">Grids</a></li>
<li><a href="#panel-fixed-page2">Header toolbar</a></li>
<li><a href="#panel-fixed-page2">Icons</a></li>
<li><a href="#panel-fixed-page2">Links</a></li>
<li><a href="#panel-fixed-page2">Listviews</a></li>
<li><a href="#panel-fixed-page2">Loader overlay</a></li>
<li><a href="#panel-fixed-page2">Navbar</a></li>
<li><a href="#panel-fixed-page2">Navbar, persistent</a></li>
<li><a href="#panel-fixed-page2">Pages</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Popup</a></li>
<li><a href="#panel-fixed-page2">Radio buttons</a></li>
<li><a href="#panel-fixed-page2">Select</a></li>
<li><a href="#panel-fixed-page2">Slider, single</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">New</a></li>
<li><a href="#panel-fixed-page2">Text inputs & textarea</a></li>
<li><a href="#panel-fixed-page2">Transitions</a></li>
</ul>
</div>
这是我使用的 css 和 js 文件：
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css">
<script src="js/jquery.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>
这是我用来设置面板宽度的 css 样式：
<style>
.ui-responsive-panel {
width:200px;
}
.ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-reveal, .ui-panel-animate.ui-panel-content-fixed-toolbar-position-left.ui-panel-content-fixed-toolbar-open.ui-panel-content-fixed-toolbar-display-push, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-reveal, .ui-panel-animate.ui-panel-content-wrap-position-left.ui-panel-content-wrap-open.ui-panel-content-wrap-display-push {
left: 0;
right: 0;
margin-left:-70px;
}
.ui-panel{
width:12.6em;
}
@media (min-width:35em)
{
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-left,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-left {
margin-right: 17em; }
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal.ui-panel-content-fixed-toolbar-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-push.ui-panel-content-wrap-position-right,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-wrap-display-reveal.ui-panel-content-wrap-position-right {
margin-left: 17em; }
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-push,
.ui-responsive-panel.ui-page-panel-open .ui-panel-content-fixed-toolbar-display-reveal {
width:auto;
}
.ui-responsive-panel .ui-panel-dismiss-display-push {
display: none;
}
}
.ui-fixed-hidden {
position: fixed;
}
</style>
并且是否可以仅使面板可滚动而不是页面或内容。
任何想法都值得赞赏。提前致谢