我一直在尝试在多台设备上测试我的 jquery 移动应用。我目前有一个通过滑动或单击“菜单”按钮打开的面板。
但是，在宽屏幕上，该应用看起来很时髦。太宽了。我知道这适用于移动设备，但为什么不将其格式化为 ipads/surface/androids 呢？
为此，我想通过要求面板在宽度超过特定值时始终打开来缩短宽度。
我翻阅了文档，发现最接近的是：
class="ui-responsive-panel" 来自以下链接：http://view.jquerymobile.com/master/docs/widgets/panels/panel-fixed.php
将它添加到我的页眉后，我注意到当窗口很宽时我无法“滑动”菜单。当我缩小窗口时（无论是在电脑浏览器上，还是通过旋转设备），它都可以滑动。
有没有人熟悉这个并且愿意解释一下？
【问题讨论】：
标签： jquery-mobile
我也面临同样的问题。当用户将设备转为横向模式（平板电脑）时，或者如果窗口一开始就比特定宽度宽，我希望面板保持打开状态。
不幸的是，在这种情况下，我没有找到任何解决方案和响应式面板的 jQuery Mobilele 示例。
所以我找到了使用一些 javascript 的方法，但我对这个解决方案不满意，因为带有媒体查询的纯 CSS 解决方案会更好。
但是，这是我的“解决方法”解决方案。
<script type="text/javascript">
window.onresize = function (event) {
if (window.innerWidth > 800) {
window.setTimeout(openPanel, 1);
}
if (window.innerWidth < 800) {
window.setTimeout(closePanel, 1);
}
};
function closePanel() {
$("#mypanel").panel("close");
}
function openPanel() {
$("#mypanel").panel("open");
}
$( "#mypanel" ).on( "panelcreate", function( event, ui ) {
if (window.innerWidth > 800) {
openPanel();
}
if (window.innerWidth < 800) {
closePanel();
}
});
</script>
所以如果窗口内宽大于800，面板打开；如果低于 800 则关闭。此外，window.onresize 函数需要提供相同的功能，以防用户将设备从纵向模式切换到横向模式。
希望它有所帮助。但我仍在寻找更好的解决方案；）
【讨论】：
我为该问题找到了一个更简单的纯 CSS 解决方案。
在响应式面板@media (min-width:55em){...} 的媒体查询中添加/覆盖以下css 类：
.ui-panel-closed { width: 17em; }
.ui-panel-content-wrap.ui-body-c.ui-panel-animate.ui-panel-content-wrap-closed{ margin-left:17em; }
根据您使用的样本，第二类可能与您的不同；在这种情况下，它是“C”。但是，只需使用包含所有页眉、内容、页脚区域的内容包装类。
在我的示例中，我使用了带有data-display="reveal" data-position="left" 的面板如果您希望它出现在右侧，只需将margin-left:17em 更改为margin-right:17em
如果您希望面板表现得像“覆盖”，请忘记我发布的第二个类... 最好的问候
【讨论】：
我现在正面临这个问题，我发现 mJay 的解决方案非常有用。但是，最好使用媒体查询来代替，可能是这样的：
@media (min-width:35em){
.ui-panel{
width:30em;
}
.ui-panel-close { width:30em; }
}
【讨论】：
以下是我的“CSS”解决方案。您需要知道的：mnuMenu 是我希望在屏幕左侧始终可见的面板的 ID，lnkMenu 是通常显示较小面板的按钮的 a 标签的 ID屏幕宽度。
@media all and (min-width: 900px)
{
#mnuMenu
{
visibility: visible;
position: fixed;
left: 0;
float: left;
width: 300px;
height: 100vh;
background: none;
-webkit-transition: none !important;
-moz-transition: none !important;
transition: none !important;
-webkit-transform: none !important;
-moz-transform: none !important;
transform: none !important;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#lnkMenu
{
display: none;
}
.ui-content
{
margin-left: 325px;
}
}
【讨论】：