Question

我使用JQM和phonegap创建一个简单的应用程序。在Android中一切都很好，但是当我在IOS设备中运行应用程序时，键盘会在屏幕上产生一些奇怪的效果

如果列表没有滚动，一切似乎都在工作， no-scroll, showing header

但是如果我稍微滚动列表并让键盘出现，地狱就会松动：

scrolled list, not showing header

HTML

<div id="my-wrapper">
  <ul data-role="listview" data-theme="a"  data-filter="true" data-filter-theme='b' data-filter-placeholder="Buscar Producto y/o Droga"  id="RemediosList">
  </ul>
</div>

和CSS

#my-wrapper {
    top : 45px;
}
#my-wrapper form {
    position :fixed;
    top      : 87px;
    left     : 15px;
    width    : 100%;
    z-index  : 10000;
}

任何帮助，都会受到欢迎！

Answer 1

我试图删除标题，只有一个固定的搜索框。适用于台式机和Android。但我在iOS中获得相同的结果。

<!DOCTYPE html> 
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>title</title>
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />

<script src="js/jquery-1.8.2.min.js"></script>
<script src="js/jquery.mobile-1.3.2.min.js"></script>

<style type="text/css">
#wrp {
padding-top : 45px;
}
#wrp form {
position :fixed!important;
top      : 13px;
left     : 15px;
width    : 100%;
z-index  : 2;

}
</style>

</head> 

<body> 

<div data-role="page" data-theme="a" data-dom-cache="true">

<div data-role="content">

<div id="wrp">

<ul id="search" data-role="listview" data-filter="true" data-filter-placeholder="Sök.." data-inset="false" data-filter-theme="a">

    <li><h2>header<h2></li>
</ul>

</div><!-- /my wrapper -->


</div><!-- /content -->
</div><!-- /page -->
</body>
</html>

修复了标题和有序列表过滤器问题

1 个答案: