Question

使用iPhone时遇到jQuery Mobile问题。当我首先加载页面时，它会很好地加载，但是当我切换方向时，它会在背景图像的底部添加空白区域。

在方向样式表中，我只有代码背景图像。 Doe有谁知道如何“修正”纵向的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文件，只使用一个没有所有和方向的东西。然后使用我发布的元视图内容。我刚刚测试过，这对我有用。无论我使用什么方向，它都会使背景图像全长。

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

jQuery Mobile - 切换方向时的空白区域

2 个答案: