Я разрабатываю приложение с использованием Worklight 6.2, где макет имеет фиксированное поле исследований в заголовке, когда это поле получает фокус, виртуальная клавиатура операционной система представлена.Позиция фиксированная не работает, когда виртуальная клавиатура отображается в iOS
Запуск этого приложения на iOS (iPhone 4 и iPhone 5 макет больше экрана), когда макет не является началом (был свернут вниз), div и вход, которые были зафиксированы в верхней части (позиция: фиксированная) теряют эту конфигурацию и аналогичны абсолютной компоновке. Другая проблема заключается в том, что заголовок (div и input) автоматически вырезает несколько пикселей, переходя в центр экрана и скрытые divs, которые отображаются с прокруткой страницы.
Ниже приведены отпечатки некоторых ситуаций и исходный код с проблемой.
без отображения виртуальной клавиатуры (правильный макет)
Когда показывают виртуальная клавиатура с макетом катилась
Когда делает прокрутку страницы с помощью виртуальной клавиатуры, показывающей (Lose конфигурации макет: фиксированный и, по-видимому, предполагает конфигурацию: абсолютный)
Мой код:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<style type="text/css">
a,abbr,address,article,aside,audio,b,blockquote,body,canvas,caption,cite,code,dd,del,details,dfn,dialog,div,dl,dt,em,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,p,pre,q,samp,section,small,span,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,ul,var,video
{
margin: 0;
padding: 0;
font-family: 'MuseoSans-100';
}
/* Worklight container div */
body {
height: 100%;
width: 100%;
}
.div-header {
height: 200px;
width: 100%;
background-color: #0094D9;
position: fixed;
}
.input-header {
margin-top: 100px;
height: 40px;
width: 100%;
}
.div-body {
height: 500px;
width: 100%;
}
.div-body-1{
background-color: #ffff9f;
}
.div-body-2{
background-color: #1b8127;
}
.div-body-3{
background-color: #fb7d00;
}
</style>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body style="display: none;">
<!--application UI goes here-->
<div id="wrapper">
<div class="div-header">
<label class="span-header">Hello Worklight</label>
<input maxlength="50" id="txtSearch" type="text" placeholder="BarCode" class="input-header">
</div>
<div id="div1" class="div-body div-body-1">
Div 1
</div>
<div id="div2" class="div-body div-body-2">
Div 2
</div>
<div id="div3" class="div-body div-body-3">
Div 3
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/main.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
Кроме того, я заметил это в IOS Simulator в прошлом, но не в устройстве. Вы тестируете это на устройстве? –
Да, это изображение экрана для iPhone 5, такая же проблема происходит в iPhone 4. –
Вы решили эту проблему. Я столкнулся с той же проблемой. Спасибо –