我目前正在使用 Titanium SDK 来使用显示我的远程网站的 WebView 。该网站上有一个 twitter-bootstrap 模式/弹出窗口。 当我在桌面/移动浏览器上查看它时，一切都很好，模态工作和一切。现在，当我在 Titanium SDK 3.5.0 上的这个 Android WebView 中查看它时，* 由于某种原因，大约 3/4 的模态/弹出窗口被截断了:
这是我的 Titanium Javascript 代码: web.xml 和 web.js: pastebin.com/RYG6EwAr
它在模拟器上运行良好，但在我的 Nexus 4 物理设备上它被切断了(模拟器运行 Nexus 4 JellyBean 4.1，物理运行 Nexus 4 Lollipop)。
这是它在我的物理设备上的样子: http://i.imgur.com/3zspXfr.jpg
为什么我的模态会被那样切断？我从 Bootstrap 站点获取了确切的代码。如果我将我的 WebView 指向此处: http://getbootstrap.com/javascript/#modals
我向下滚动到 Example Modal 按钮并单击它，模态看起来不错!不会被切断或任何东西!
这是我的被截断的 HTML 代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<! -- /Modal -->
<!-- Latest compiled and minified JavaScript -->
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
//alert("test");
});
</script>
</body>
</html>
这是怎么回事？为什么它在我的页面上被截断了，而在 getbootstrap.com 页面上却没有？
最佳答案
想通了。 原来 Titanium 的 Webview 没有正确设置 body 的高度以符合内容的高度。
我通过将主体的最小高度设置为我的 HTML 文件中加载的模态高度来修复它。
关于android - Bootstrap Modal 无法在 Android Webview 上正确显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28226537/