PhoneGapアプリがダウンロード後に正しく表示されない

私はJQueryモバイルを使用してアプリケーションを構築しました。 Webブラウザでテストするとうまく動作します。しかし、PhoneGapを使って自分の電話機にダウンロードしたら、すべてのページのスタイルとレイアウトは機能しません。それは単なるテキストページです。アプリは2つのページといくつかの簡単な機能を持っています。私はスタイリングにテーマローラーを使用しましたが、ダウンロード時には何も表示されません。あなたのテーマの後PhoneGapアプリがダウンロード後に正しく表示されない

<!DOCTYPE html> 
<html> 
<head> 
<title>Portfolio Page</title> 

<link rel="stylesheet" href="themes/MyTheme.css" /> 
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" /> 
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
</head> 

<body> 

    <div data-role="page" id="page1" data-theme="d"> 

     <div data-role="header"> 
      <h1>My Portfolio</h1> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#page1" data-icon="grid">Home</a></li> 
        <li><a href="#page2" data-icon="grid">Contact Me</a></li> 
       </ul> 
      </div> 
     </div> 

     <div data-role="main" class="ui-content"> 
      <h1>Personal Info</h1> 

      <div data-role="collapsible"> 

       <h1>Past Work</h1> 
       <p>Look at my past work</h1> 

      </div> 

      <div data-role="collapsible"> 

       <h1>Education</h1> 
       <p>Teaching myself to code</h1> 

      </div> 

     </div> 

     <div data-role="footer"> 
      <h2>My portfolio</h2> 

     </div> 

    </div> 

    <div data-role="page" id="page2" data-theme="d"> 

     <div data-role="header"> 
      <h1>My Portfolio</h1> 
      <div data-role="navbar"> 
       <ul> 
        <li><a href="#page1" data-icon="grid">Home</a></li> 
        <li><a href="#page2" data-icon="grid">Contact Me</a></li> 
       </ul> 
      </div> 
     </div> 

     <div data-role="main" class="ui-content"> 
      <h1>Contact Me</h1> 

      <form> 

       <label for="essay">Tell me what you think</label> 
       <textarea name="essay" id="essay" placeholder="Rate me"></textarea> 
       <label for="range">Rate me out of 10</label> 
       <input type="range" name="rate" id="rate" min="0" max="10" /> 
       <input type="submit" name="go" id="go" value="Rate My App" /> 

      </form> 

     </div> 

     <div data-role="footer"> 
      <h2>My Portfolio</h2> 

     </div> 

    </div> 

</body> 

</html>

出典

2017-10-23 Edward Dunn

ヘッダー部分を含むHTMLページのコード全体を指定します。スタイルをリンクする方法を確認する必要があります。 –

ありがとう私は完全なコードを追加しました。 –

ローカルファイルとしてjQueryとJQMを設定しました – deblocker

、あなたもJQM構造CSSへの参照を追加する必要があります。その後

<!-- JQM theme shall be loaded before structure --> 
    <link rel="stylesheet" href="css/my-theme.min.css" /> 
    <link rel="stylesheet" href="css/jquery.mobile.icons.min.css" /> 
    <link rel="stylesheet" href="css/jquery.mobile.structure-1.4.5.min.css" />

を、あなたはもう完全なjquery.mobile-1.4.5.min.cssを必要としません。

...また、ローカルPhoneGapファイルとしてjQueryとJQMが含まれています。

出典

2017-10-24 11:22:38 deblocker

ウェブページの通常のようなライブラリを参照することはできません。 –

PhoneGapアプリの仕組みを理解する必要があります。彼らはウェブサイトではないので、ブラウザで実行したときのように振る舞いません。 PhoneGapアプリはWebブラウザで多くの機能を共有するwebviewでサンドボックス化されていますが、重要な違いがあります。セキュリティの重要な違いの1つは、発生している問題を引き起こします。

jQueryライブラリをWebから直接リンクしています。これは、ファイルを自動的にダウンロードするブラウザで実行すると動作します。ただし、携帯電話でアプリを実行すると、セキュリティ上の理由で外部のウェブサイトへのアクセスがブロックされるため、webviewはそれらのファイルをブロックします。だからこそあなたはスタイルや機能を持たないアプリを手に入れます。

アプリがAPIのようないくつかのウェブサイトにアクセスする必要がある場合（ほとんどのアプリはそうです）、ウェブビューにそれらの特定のウェブサイトへのアクセスを許可する必要があります。あなたは<access origin="..." />タグを使ってあなたのconfig.xmlよりも行います。しかし、私たちは図書館ではそうしていないので、単にダウンロードしてPhoneGapアプリにバンドルするだけです。

PhoneGapプロジェクトのローカルフォルダにテーマをダウンロードしました（私はあなたのコードから推測します）。それは良い！ただし、次の3つのライブラリファイルについても同じ処理を行う必要があります。それらをローカルのフォルダにダウンロードし、それに応じてリンクを変更する必要があります。

出典

2017-10-24 14:25:40

これは私の問題が何であるかについての非常に明確な説明であり、私はそれを試みます。 –

問題を解決しました、ありがとう！ –

PhoneGapアプリがダウンロード後に正しく表示されない

答えて

関連する問題