logo标签列表

Twitter Bootstrap在Android WebView中无法正常工作

androidhtmleclipsetwitter-bootstrapwebview
10

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和Bootstrap CSS文件放在资产文件夹中。如果我在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会呈现出这样的效果

IE Renders it like this

WebView会呈现出这样的效果

WebView Renders it like this

出了什么问题？

1
你是否将设备连接到电脑上，以查看CSS文件是否正在加载（即未出现404错误）？ - munch1324
1
我已经使用你的代码建立了一个测试项目，但是无法在模拟器或设备上重现这个问题。你能否详细说明你的环境、Android版本、Bootstrap版本等？ - Philzen
CSS 可能（虽然不太可能）使用来自外部来源的导入 - 如果清单中没有设置 <uses-permission android:name="android.permission.INTERNET" />，那可能就是你的解释。 - Philzen
4个回答
3

添加这行代码

webView.getSettings().setDomStorageEnabled(true);
1
这是不必要的，没有访问任何存储。对于这个特定的示例，setJavaScriptEnabled(true)也是不必要的，尽管它不是问题，我相信以后会用到它。 - Anthony Hiscox
1

在模拟器上测试 - Android 版本 4.2，使用 Bootstrap v2.3.2

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

 bootstrap-responsive.css
 bootstrap.css
 test.html

不需要在Android清单中添加“android.permission.INTERNET”，因为css文件在应用程序的资产文件夹中本地可用。
以下是呈现方式的屏幕截图。除非CSS文件出现问题（这也不太可能，因为您可以在浏览器上看到结果），否则没有理由不能看到它。

enter image description here

0
  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");
0

使用 Kotlin：

webview.settings.javaScriptEnabled = true
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接