jQuery移动-切换方向时的空白

Question

在使用iPhone时，jQuery手机出现问题。当我第一次加载页面时，它加载得很好，但只要我切换方向，它就会在背景图像的底部添加空白。

在方向样式表中，我只有背景图像的代码。有没有人知道我怎么才能“修复”肖像的高度为420px，风景的高度为320px？

谢谢。

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

Answer 1

去掉width=device-width，直接使用

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

编辑:我遇到了同样的问题，并使用了上面的。然而，我没有你拥有的不同的css。

编辑2:试一试，去掉2个不同的css文件，只使用一个不带all和方向的文件。然后使用我发布的元视图内容。我刚刚测试了一下，这对我很有效。无论我使用哪种方向，它都会使背景图像变得完整。

.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;
}

Answer 2

更改：

all and (orientation:portrait)
all and (orientation:landscape)

至：

all and (max-width: 419px) <--will be used for widths less than 420px
all and (min-width: 420px) <--will be used for widths more than or equal to 420px

这是我之前用过的一个教程，有很多，所以如果这篇文章不能回答你所有的问题，那就继续搜索：http://css-tricks.com/6731-css-media-queries/