【发布时间】：2013-04-25 03:10:22
【问题描述】：
我正在创建一个带有 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 的浏览器中做同样的事情吗？
-
@NoBugs 我的问题中描述了每个屏幕截图。第一个是应用程序的屏幕截图，第二个是我的Android设备浏览器的屏幕截图。不同的是，浏览器实现了css，而应用程序没有。
-
我知道这是旧的，但您是否尝试过 CSS 的绝对 URL？
标签： android css html jquery-mobile webview