Question

更新我已经跟踪了pageBeforeHide和pageBeforeShow事件之间的错误。在这些事件之间，添加和删除类.ui-overlay-c。这些CSS类如下所示：

.ui-body-c,
.ui-overlay-c {
border: 1px solid       #aaa /*{c-body-border}*/;
color:                  #333 /*{c-body-color}*/;
text-shadow: 0 /*{c-body-shadow-x}*/ 1px /*{c-body-shadow-y}*/ 0 /*{c-body-shadow-radius}*/ #fff /*{c-body-shadow-color}*/;
background:             #f9f9f9 /*{c-body-background-color}*/;
background-image: -webkit-gradient(linear, left top, left bottom, from( #f9f9f9 /*{c-body-background-start}*/), to( #eee /*{c-body-background-end}*/)); /* Saf4+, Chrome */
background-image: -webkit-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* Chrome 10+, Saf5.1+ */
background-image:    -moz-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* FF3.6 */
background-image:     -ms-linear-gradient( #f9f9f9 /*{c-body-background-start}*/, #eee /*{c-body-background-end}*/); /* IE10 */
background-image:      -o-linear-gradient( #f9f9f9 /*{c-body-background-start}*/,     #eee /*{c-body-background-end}*/); /* Opera 11.10+ */
background-image:         linear-gradient( #f9f9f9 /*{c-body-background-start}*/,     #eee /*{c-body-background-end}*/);
}
.ui-overlay-c {
background-image: none;
border-width: 0;
}

/更新

我正在开发一个触摸屏网站并使用jQueryMobile库。该网站的设计运行速度为1366px x 768px但不小。

大多数东西都在浏览器上运行，但我遇到了一个在转换期间发生的讨厌的错误。页面宽度为99.55％，所有边缘均采用纯白色10px边框。在转换期间，页面缩小约40px（仅从右侧），然后在加载新页面时，该页面也缩小，直到展开以填充适当的宽度。

我猜这是由于jQueryMobile转换的性质，但我无法阻止它发生。

您可以在此处at this link看到此效果，只需点击一次，然后点击任意导航项。它应该在第一次点击后收缩和扩展。

jQM的工作方式，有一个移动视口包装器，它使用以下css：

top: 0;
left: 0;
width: 100%;
min-height: 100%;
position: absolute;
display:none;
border: 0;

在页面之间转换期间，沿移动视口包装器应用以下样式：

width: 100%;
height: 100%;
overflow: hidden;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

在此视口中，有单独的页面（.ui-page），每个页面都包含以下css：

top: 0;
left: 0;
min-height: 100%;
position: absolute;
display: none; // overridden to display:block when the page is loaded
border: 0;
padding: 0;
margin: 0;

以下是我在页面级别与.ui-page：

一起应用的自定义样式

color: black !important;
background-image: none !important;
background-color: #ddd2cc !important;
border: 10px solid white !important;
padding: 20px !important;
width: 95.55% !important;

我对jQueryMobile CSS内部知识有限，但是有关如何阻止页面扩展/收缩的任何指导都会有所帮助。我的直觉告诉我，问题是由于我的css覆盖jQM css并在页面加载后应用填充，导致用户能够看到此填充添加。

Answer 1

最简单的修复：

$.mobile.maxTransitionWidth = 320;

jQM在大视口大小时不能很好地处理页面转换。把它们关掉，这个bug就消失了。

jQuery Mobile Page Resizing在加载后可见

1 个答案: