Question

我目前正在使用 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站点获取了确切的代码。如果我在这里指出我的网页浏览： 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没有正确设置身体的高度以符合内容的高度。

我通过将身体的最小高度设置为我的HTML文件中的模态高度onload来修复它。

Bootstrap Modal无法在Android Webview上正确显示

1 个答案: