4

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>

これはシナリオです:

  1. PC ブラウザで Web ページを開くと、すべて正常に動作します。私の CSS スタイルはすべてうまく機能します。
  2. Android ブラウザーで (リロードせずに) 初めて Web ページを開くと、CSS スタイルが表示されません。しかし、更新すると、CSS スタイルが表示されます。
  3. 作成したアプリケーションを開くと、CSS が機能しません。すべての CSS スタイルがアプリに表示されません。

アプリケーションのスクリーンショット (CSS を実装していません):これはアプリケーションのスクリーンショットです。CSS は表示されていません。

Android ブラウザのスクリーンショット (CSS を実装)これはブラウザのスクリーンショットで、CSS を示しています

4

1 に答える 1

-6

Android はtableタグをサポートしません。あなたのhtmlにはテーブルタグが含まれているため、適切なビューが得られませんでした。

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 に答える