我正在创建一个带有 webview 的 Android 应用程序。 我计划将所有 PHP、HTML5、CSS 和 Javascript 文件放在服务器上。我正在使用 JQuery Mobile 框架。
这是打开 webview 的代码:
WebView myWebView = (WebView) findViewById(R.id.webview);
WebSettings webSettings = myWebView.getSettings();
webSettings.setJavaScriptEnabled(true);
myWebView.setWebViewClient(new WebViewClient());
myWebView.loadUrl("http://thefinddroid.com/TriviaGame");
这是 CSS 文件:
img.option {
paddding:5px;
border:3px solid #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#text_question {
font-size:25px;
text-align: center;
}
img.question {
padding:5px;
border:4px solid #FFFFFF;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
}
#offer {
display:block;
width:480px;
margin:10px;
height:20px;
padding:5px;
-webkit-border-radius:10px;
color:#000000;
-moz-border-radius:10px;
border-radius:10px;
border:3px solid #DBDBDB;
}
这是加载 CSS 的 HTML 文件的一部分:
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="styles/styles.css" />
<script src="js/jqm_171.js"></script>
<script src="js/jqm120_alpha.js"></script>
这是 body 标签内的 HTML5 代码:
<body>
<div align="center" data-role="page" data-theme="b">
<div data-role="header">
<h1>Trivia Game</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<h1>Question #1</h1>
<img class="question"
src="images/q1.jpg"
align="center" />
<div id="text_question">
<p>Which guitar is used in this picture?</p>
</div>
<table cellspacing="10">
<tr>
<td>
<img class="option"
id="option_1"
src="images/c1.jpg"
onclick="selected_option(1)" />
</td>
<td>
<img class="option"
id="option_2"
src="images/c2.jpg"
onclick="selected_option(2)" />
</td>
</tr>
<td>
<img class="option"
id="option_3"
src="images/c3.jpg"
onclick="selected_option(3)" />
</td>
<td>
<img class="option"
id="option_4"
src="images/c4.jpg"
onclick="selected_option(4)" />
</td>
</tr>
</table>
<br /> <br />
<div id="offer">To learn more on Stylist :
Article, Links and Benfits - <a href="#">Click here</a></div>
</div>
</div>
</div>
</body>
这是场景:
- 当我在 PC 浏览器中打开网页时，一切正常。我的所有 CSS 样式都运行良好。
- 当我第一次在我的 Android 浏览器中打开网页时(没有重新加载)，CSS 样式没有显示。但是当我刷新它时，它会显示 CSS 样式。
- 当我打开我创建的应用程序时，CSS 不工作。我的应用中没有显示所有 CSS 样式。
应用程序屏幕截图(未实现 CSS):
来自 Android 浏览器的屏幕截图(实现 CSS)
最佳答案
Android 不支持 table 标签。在您的 html 中包含表格标记，这就是您没有获得正确 View 的原因。
Android 仅支持以下 html 标签。
<a href="...">
<b>
<big>
<blockquote>
<br>
<cite>
<dfn>
<div align="...">
<em>
<font size="..." color="..." face="...">
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<i>
<img src="...">
<p>
<small>
<strike>
<strong>
<sub>
<sup>
<tt>
<u>
关于Android Webview 没有实现 CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16205733/