Question

我们正在开发具有固定页眉和页脚的Phonegap移动应用程序。但是如果任何表单元素集中在一起，则整个页面变得可滚动，页眉和页脚会丢失其固定位置。在Android中它运行良好但在iOS中我们遇到了这个问题。

更新： -

Viewport Meta

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, height=device-height, width=device-width ,target-densityDpi=device-dpi"/>

应用标题

<div data-role="header" id ="Top_content" data-position="fixed" data-tap-toggle="false" data-hide-during-focus=""> 
    <div id="jqm-homeheader" class="jqm-homeheader" align="center"> 
        <img src="images/logo.png" align="center"> 
    </div><!-- Logo closes-->
    <div data-theme="c" data-add-back-btn="true" > 
        <div id="search-box1">
            <form action="" onsubmit="custom_search();"> 
                <input type="search" name="search-product" id="search-product" value="" placeholder="Search" style="width:90%;" data-theme="s" />
            </form> 
        </div> <!-- Search Box--> 
    </div>
</div>

Answer 1

这是一个错误。我有同样的，它很烦人。在标题头中添加以下行：

<script>     
$(document).on("mobileinit", function () {
  $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
  $.mobile.fixedtoolbar.prototype.options.hideDuringFocus ="";
});
</script>

在以下后添加：

<script type="text/javascript" src="phonegap.js"></script>

如果你有jquery和jquery mobile，它必须是：

**更改SRC **

<script type="text/javascript" src="phonegap.js"></script> 
<script type="text/javascript" src="js/libs/jquery-1.9.1.min.js" ></script>
<script>     
$(document).on("mobileinit", function () {
  $.mobile.fixedtoolbar.prototype.options.tapToggle = false;
  $.mobile.fixedtoolbar.prototype.options.hideDuringFocus ="";
});
</script>
<script type="text/javascript" src="js/libs/jquery.mobile-1.3.2.js" ></script>  
 <!-- css -->
<link rel="stylesheet" href="js/libs/jquery.mobile-1.3.1.min.css" />

Phonegap固定页眉和页脚

1 个答案: