Twitter Bootstrap 在 Android WebView 中不起作用答案

【问题标题】：Twitter Bootstrap not working in Android WebViewTwitter Bootstrap 在 Android WebView 中不起作用
【发布时间】：2013-04-15 07:46:52
【问题描述】：

HTML 文件(test.html) 是

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <link href="bootstrap.css" rel="stylesheet" type="text/css"/>
    <link href="bootstrap-responsive.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>Hello World!!!</h1>
 <a class="btn btn-primary btn-large">
    Learn more
</a>
</body>
</html>

HTML 和引导 css 文件放置在 assets 文件夹中。如果我在 IE/Firefox 中打开 HTML 文件，它会正确显示。但是 Android WebView 不能正确呈现这个

WebView 的代码是

WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
String url = "file:///android_asset/test.html";
webView.loadUrl(url);

IE 是这样渲染的

WebView 是这样渲染的

怎么了？

【问题讨论】：

你有没有把你的设备连接到你的电脑上，看看css文件是否正在加载（即不是404）。
我已经用你的代码建立了一个测试项目，我无法在模拟器和设备上重现这个问题。能否详细说说你的环境、android级别、bootstrap版本等？
css 可能（虽然不太可能）使用来自外部源的导入 - 如果在 Manifest 中没有设置` `可能是你的解释。

标签： android html eclipse twitter-bootstrap webview

【解决方案1】：

添加这一行

webView.getSettings().setDomStorageEnabled(true);

【讨论】：

这是不必要的，没有存储被访问。对于这个特定示例，setJavaScriptEnabled(true) 也是不必要的，尽管这不是问题，我确信它计划在以后使用。

【解决方案2】：

在模拟器上测试 - 带有 Bootstrap v2.3.2 的 Android 版本 4.2

我的应用资产文件夹中的文件：

 bootstrap-responsive.css
 bootstrap.css
 test.html

无需在 Android 清单中添加“android.permission.INTERNET”，因为 css 文件在应用的资产文件夹中本地可用。

这是它如何呈现的屏幕截图。除非 CSS 文件有问题，否则没有理由看不到它（这又不太可能，因为您可以在浏览器上看到结果）。

【讨论】：

【解决方案3】：

  WebView webView = (WebView) findViewById(R.id.webview);
  webView.getSettings().setJavaScriptEnabled(true);    
  String htmlData ="<link rel=\"stylesheet\" href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css\">"+yourdata;    
  webview.loadData(htmlData, "text/html",  "UTF-8");

【讨论】：

【解决方案4】：

在科特林中：

webview.settings.javaScriptEnabled = true

【讨论】：