Home/ Questions/Q 6918015
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T09:48:17+00:00

Having an issue with jQuery Mobile when using an iPhone. When I load the

  • 0

Having an issue with jQuery Mobile when using an iPhone. When I load the page first it loads fine but as soon as I switch orientation it adds white space to the bottom of the background image.

In the orientation style-sheets I just have the code the background image. Doe anyone know how I can “fix” the height to 420px for portrait and 320px for landscape?

Thanks.

    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd"><head>
<title>Mobile Website</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="http://code.jquery.com/mobile/latest/jquery.mobile.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.min.js"></script>

<link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)"href="css/landscape.css">

</head>

<body>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Take out width=device-width and just use

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">

    EDIT:
    I had this same issue and used the above. However, I didn’t have the different css’s that you have.

    EDIT 2:
    Try this and get rid of the 2 different css files and just use one without the all and orientation stuff. Then use the meta view stuff I posted as well. I just tested and this worked for me. It made the background image full length no matter what orientation I used.

    .ui-page {
    background: url(images/purple.jpg) no-repeat center center fixed;
            -webkit-background-size: cover;
            -moz-background-size: cover;
            -o-background-size: cover;
            background-size: cover;
}
    • 0