4

我正在使用 webview 创建一个 Android 应用程序。我计划将所有 PHP、HTML5、CSS 和 Javascript 文件放在服务器上。我正在使用 JQuery Mobile 框架。

这是打开 web 视图的代码：

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>

这是场景：

  1. 当我在 PC 浏览器中打开网页时，一切正常。我所有的 CSS 样式都运行良好。
  2. 当我第一次在我的 Android 浏览器中打开网页时（没有重新加载），CSS 样式不显示。但是当我刷新它时，它会显示 CSS 样式。
  3. 当我打开我创建的应用程序时，CSS 不起作用。所有的 CSS 样式都没有显示在我的应用程序中。

应用程序的屏幕截图（不实现 CSS）：这是应用程序的屏幕截图，它没有显示 CSS

Android 浏览器的屏幕截图（实现 CSS）这是浏览器的截图，它显示了 CSS

4

1 回答 1

-6

Android 不支持表格标签。在您的 html 中包含 table 标签，这就是您没有获得正确视图的原因。

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>
于 2013-04-25T05:36:40.133 回答