Phonegap Windows Phone Зазор пробел внизу

Я разрабатываю телефонную трубку, и у меня возникла проблема со стилем.Phonegap Windows Phone Зазор пробел внизу

Я просто хочу разместить нижний колонтитул внизу.

Вот мой index.html

<!DOCTYPE html>  
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/index.css" /> 
    <title>Hello World</title> 
    <script type="text/javascript" src="cordova-2.6.0.js"></script> 
    <script type="text/javascript" src="js/index.js"></script> 
</head> 
<body id="page">   
    <div id="bottom"> 
     <p>Bonjour</p> 
    </div> 
</body> 
</html>

Это мой CSS

#bottom { 
position:fixed; 
width: 100%; 
bottom: 0px; 
background-color: #f00; 
} 
body { 
min-height: 533px; 
height : 100%; 
padding: 0; 
margin: 0; 
}

И я получил эту

Result on the phone

Как я могу решить эту проблему, или кто-нибудь встречает ту же проблему?

Спасибо!

источник

2013-05-03 dpfauwadel

ли только на телефоне Windows? Возможно, это особый пробел для оконных кнопок –

Да, это только на телефоне Windows. Мы уже пытаемся использовать iphone и Android, и это отлично работает. – dpfauwadel

@ChristopheSophy Я бы хотел поддержать этот комментарий ... – Dnaso

Прежде всего, это то, что фиксированная позиция не работает на IE.

Чтобы это исправить, я добавляю включить JQuery на мой проект и изменить положение к абсолютному

#bottom { 
position:absolute; 
width: 100%; 
bottom: 0px; 
background-color: #f00;   
margin: 0px; 
padding: 0px; 
left: 0px; 
}

и мой index.html

<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 

    <link rel="stylesheet" type="text/css" href="css/index.css" /> 

    <title>Hello World</title> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css"> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script> 

    <script type="text/javascript" src="cordova-2.6.0.js"></script> 

    <script type="text/javascript" src="js/index.js"></script> 

</head> 
<body> 
    <div id="bottom"> 
     <p>Bonjour</p> 
    </div> 
</body> 
</html>

И теперь он работает

источник

2013-05-06 09:40:51 dpfauwadel

Проверьте стили, убедитесь, что нет других стилей, которые автоматически добавляются. Единственное, что нужно проверить, это стиль для <p>. Попробуйте установить маржу и отступы как на 0.

источник

2013-05-03 17:57:19 whodeee

Phonegap Windows Phone Зазор пробел внизу

ответ

Смежные вопросы