Jquery mobile jQuery Mobile-标题和内容之间的间隙
使用$.mobile.changepage2导航时；我意识到jQM在下一页的标题下添加了1-3倍的间隙 当使用Cordova调用photolibrary选择照片时，间隙将消失，但我不需要相机插件，我希望间隙不会出现在第一位 我不是说在调用camera plugin时添加到底部的白色间隙，也不是说通过在ViewWillDisplay下的MainViewController中更改自己的web视图来解决，也不是说我发现的任何其他间隙问题 我所说的差距是标题和ui内容之间的差距 我以前一直在使用jQM，在过去的项目中使用的版本没有引起任何类似的问题 我正在使用jqm1.4.2、jquery1.11.0和cordova3.1.0 这里有两张图片，我改成了颜色，使问题更加明显 暗光线->标题 红色->用户界面页面背景 蓝色->ui内容中的第一个也是唯一一个DIV元素 图1：无间隙-如果页面是索引页面，则为无间隙 2图像：这是当页面为第2页时，使用changePage导航到该页面 在标题和内容中的第一个DIV之间，您可以看到一个间隙 我已经注释掉了每一行代码，除了基本结构和元素的颜色。另外，如果该页面是主页，则该页面将显示为空白。但是，如果我有一个不同的主页，点击一个调用$.mobile.changepage2的div；第二页将显示标题和内容之间的间隙 编辑-更新： 我创建了一个干净的项目只是为了重现这个问题。我不知道如何解决这个问题，如果我不能解决这个问题，我就不能继续进行任何项目，因为这在jQM 1.4.2的每个项目中都会发生：Jquery mobile jQuery Mobile-标题和内容之间的间隙,jquery-mobile,cordova,Jquery Mobile,Cordova,使用$.mobile.changepage2导航时；我意识到jQM在下一页的标题下添加了1-3倍的间隙 当使用Cordova调用photolibrary选择照片时，间隙将消失，但我不需要相机插件，我希望间隙不会出现在第一位 我不是说在调用camera plugin时添加到底部的白色间隙，也不是说通过在ViewWillDisplay下的MainViewController中更改自己的web视图来解决，也不是说我发现的任何其他间隙问题 我所说的差距是标题和ui内容之间的差距 我以前一直在使用jQM，
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge;chrome=1" />
<link rel="stylesheet" href="jquery.mobile-1.4.2.css" />
<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.mobile-1.4.2.js"></script>
<script>
$(document).on('tap', '#gotop2', function(event){
event.preventDefault();
//$.mobile.changePage('#p2');
$.mobile.pageContainer.pagecontainer("change", "#p2")
});
</script>
</head>
<body>
<div data-role="page" id="p1">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 1</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="gotop2">go to page2</div>
</div>
</div>
<div data-role="page" id="p2">
<div data-role="header" id="header" data-position="fixed" data-tap-toggle="false" data-id="h1">
<h1>page 2</h1>
</div>
<div data-role="content" style="padding:0px; margin:0px;">
<div id="blueblock" style="height:20px; width:100%; background-color:#22272c; background-color:blue; padding:0px !important; margin:0px !important;"></div>
</div>
</div>
</body>
如果您直接在浏览器中调用/index.htmlp2，则不会出现任何间隙。您应该使用$.mobile.pageContainer.pagecontainerchange，pageID为$.mobile.changePage是不推荐的。试试看有没有什么不同。@Omar谢谢你指出这一点。我完全忘记了。但不幸的是，它没有改变任何事情：/。我提供了一个干净的示例项目，看看我上面的更新。当您使用anchor href=p2更改页面时，是否也会发生同样的情况？将数据主题=b添加到第二页的标题中，仅用于测试。它不会出现在Chrome桌面上，我会在iPhone上试试。更新：iPhone没有问题。这可能是cordova/phonegap问题。无论如何，请尝试此解决方案以强制更新页面的维度$document.onpagecontainershow，函数{$.mobile.resetActivePageHeight}；。我最终使用了原始的jQM css文件，只添加了边框：0；在标题样式中。谢谢你，奥马尔。