Bootstrap 模式在 Android Webview 上显示不正确

Question

我目前正在使用 Titanium SDK 来使用显示我的远程网站的网络视图。该网站上有一个推特-bootstrap modal/popup。当我在 desktop/mobile 浏览器上查看它时，一切都很好，模态工作和一切。现在，当我在 Titanium SDK 3.5.0 上的 Android WebView 中查看它时，* 大约 3/4 的 modal/popup 由于某种原因被截断了：

这是我的 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 站点获取了确切的代码。如果我将我的网络视图指向这里： http://getbootstrap.com/javascript/#modals

然后我向下滚动到示例模态按钮并单击它，模态看起来不错！不会被切断或任何东西！

这是我的 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">&times;</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 页面却没有？

Answer 1

想通了。原来 Titanium 的 Webview 没有正确设置 body 的高度以符合内容的高度。

我通过在我的 HTML 文件中将正文的最小高度设置为模态的加载高度来修复它。

Bootstrap 模式在 Android Webview 上显示不正确

Bootstrap Modal not displaying correctly on Android Webview

css

android

titanium

webview

twitter-bootstrap