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

我在另一个帖子中询问后发现了问题。问题是我的 css 文件未包含在要呈现的第一页中（即 index.html），如果样式表未包含在第一页中，它也不会包含在其他页面中。希望这对其他人有帮助..

于 2013-04-05T20:50:50.003 回答