jQuery Mobile - пробел при переключении ориентации - PullRequest
Новая
       5

jQuery Mobile - пробел при переключении ориентации

4 голосов
/ 13 декабря 2011

Проблемы с jQuery Mobile при использовании iPhone. Когда я сначала загружаю страницу, она загружается нормально, но как только я переключаю ориентацию, она добавляет пробел к нижней части фонового изображения.

В таблицах стилей ориентации у меня просто есть код фонового изображения. Кто-нибудь знает, как я могу «зафиксировать» высоту до 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>

Ответы [ 2 ]

4 голосов
/ 13 декабря 2011

Выньте 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;
}
0 голосов
/ 13 декабря 2011

Изменение: 

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

Вот учебник, который я использовал некоторое время назад, есть тонны, так что если он не отвечает на все ваши вопросы, просто продолжайте поискать в Google: http://css -tricks.com / 6731-css-media-query /

...