0

私はstackoverflowでこれらの質問をたくさん読みましたが、それが再発する問題であることを知っています. ほとんどの人は通常、<meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1>タグを見逃しています。これは私の場合ではありません。phonegapとjquery mobileでアプリを作っています...

これは、次のようなブレークポイントを持つ私の css ファイルです。

/* independent of size */

.ui-bar {
    height: 20em;
}

.ui-grid-a.ui-block-b {
    width: 66%;
}

/* small screen */
@media all and (max-width: 62em) { 
    .responsive.ui-grid-b.ui-block-a, .responsive.ui-grid-b.ui-block-b, .responsive.ui-grid-b.ui-block-c, {
        padding: 0;
        border: 0;
        float: none;
        min-height: 1px;
    }

    .responsive.ui-grid-b > :nth-child(n) { width: 100% }
    .responsive.ui-grid-d > :nth-child(n) { width: 100%; margin-bottom: 2em }
}


/* big screen  */
@media all and (min-width: 63em) {

    .responsive.ui-grid-b.ui-block-a, .responsive.ui-grid-b.ui-block-b, .responsive.ui-grid-b.ui-block-c, {
        padding: 0;
        border: 0;
        float: none;
        min-height: 1px;
    }

    .responsive.ui-grid-b > :nth-child(n) { width: 33% }

    .responsive.ui-grid-d .ui-block-a { width: 19.95% }
    .responsive.ui-grid-d .ui-block-b { width: 59.95% }
    .responsive.ui-grid-d .ui-block-c { width: 9.95% }
    .responsive.ui-grid-d .ui-block-d { width: 9.95% }

        .responsive.ui-grid-d .ui-block-c .desc-body {
            float: right;
        }

        .responsive.ui-grid-d .ui-block-d .desc-body {
            float: right;
        }

        .responsive.ui-grid-d .ui-block-c h3 {
             text-align: right;
        }

        .responsive.ui-grid-d .ui-block-d h3 {
             text-align: right;
        }
}

レスポンシブ クラスのすべての要素は、これらの変更に応答するはずです。html ファイルを実行するとブラウザーで動作するようになりましたが、シミュレーターまたは iPhone デバイスで実行すると、ページに css が表示されません。なぜそうなのですか？

これが私のhtmlの頭です：

  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <title>
    </title>
    <link rel="stylesheet" href="css/jquery.mobile-1.3.0.min.css" />
    <link rel="stylesheet" href="css/responsive.css"/>  <!-- my css file -->
    <script src="js/jquery-1.9.1.min.js">
        </script>
    <script src="js/jquery.mobile-1.3.0.min.js">
        </script>
    <script type="text/javascript" src="cordova-2.5.0.js">
        </script>
  </head>

デバイスでレンダリングされない要素の例。

  <div class="ui-grid-d responsive">         <!-- here goes responisive -->

                <div class="ui-block-a">
                    <h3>Date</h3>
                    <hr>
                    <div class="desc-body">Some text...</div>
                </div>
4

1 に答える 1

1

別のスレッドで質問したところ、問題が見つかりました。問題は、レンダリングする最初のページ (つまり、index.html) に私の css ファイルが含まれておらず、スタイルシートが最初のページに含まれていない場合、他のページにも含まれないことでした。これが他の人に役立つことを願っています..

于 2013-04-05T20:50:50.003 に答える