CODEWITHSUNDEEP
jquery-mobileresponsive-design
patriques
patriques

Reputation: 5221

jQuery Mobile: CSS does respond on browser resizing but not on device

I have read alot of these questions on stackoverflow, and know thats its a reoccuring problem. Most of the people is usually missing the <meta name="viewport" content="height=device-height, width=device-width, minimum-scale=1> tag. This is not my case. Im making a app with phonegap and jquery mobile...

This is my css file with the breakpoint as following. 

/* 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;
        }
}

All the elements with my repsonsive class is supposed to respond to these changes.. Now it works on my browser when I run the html file but when running the on the simulator or on a iphone device the page does not show my css. Why is it so?

Here is the head of my 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>

and an example of a element that does not render on the device. 

  <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>

Upvotes: 0

Views: 670

Answers (1)

patriques
patriques

Reputation: 5221

I found the problem after asking in another thread. The problem was that my css-file wasn't included in the first page to render (i.e the index.html) and if the stylesheet is not included in the first page it will not be included in other pages aswell. Hope this help others..

Upvotes: 1

Related Questions