Как сохранить макет без изменений при отображении клавиатуры?

У меня есть игрушка-пример приложения html, работающего в Кордове (код ниже), который выложен всем по отношению к размеру видового экрана (любая позиция: абсолютная и процентная, или vh единиц для шрифтов).Как сохранить макет без изменений при отображении клавиатуры?

Неожиданно, когда отображается клавиатура, окно просмотра сжимается вертикально, что приводит к расположению, показанному на втором снимке экрана.

;

Я хотел бы, чтобы начальный макет выполнялся именно так, как он есть здесь, относительно полной ширины/высоты окна просмотра, но для того, чтобы он не менял размер при отображении клавиатуры; скорее, он должен оставаться таким же высоким, как и до появления клавиатуры.

Как это сделать?

код HTML/CSS:

<!DOCTYPE html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 

<style type="text/css"> 

.main { 
    font-size: 4vh; 
    color: #000000; 
    position:absolute; 
    top:12%; 
    left:5%; 
    width:90%;" 
} 

.button { 
    background: #006000; 
    font-size: 4vh; 
    color: #FFFFFF; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position:absolute; 
    top:85%; 
    left:0%; 
    width:100%; 
    height:15% 
} 

html,body { 
    height: 100%; 
    width:100%; 
    background-color:#FFFFFF; 
    overflow: hidden; 
} 

</style> 
</head> 
<body> 

<div class="screen"> 
    <div class="main"> 
    Type in something:<br/><br/> 
    <input type="text"> 
    </div> 

    <div class="button"> 
    Next 
    </div> 
</div> 



</body> 
</html>

P.S. Было бы неплохо, если бы просмотр автоматически прокручивался так, чтобы выбранное поле ввода было видимым, но это отдельный вопрос :)

Окружающая среда: Cordova 5.1.1, Android SDK 23, эмулятор Android, работающий на Ubuntu 14.04.

источник

2016-09-15 Alex I

Вы должны изменить на значение для android:windowSoftInputMode в AndroidManifest.xml.

Перейдите в папку platforms/android/.
Открыть файл AndroidManifest.xml
В <activity> элемента изменить значение android:windowSoftInputMode от "adjustResize" к "adjustPan"

документации для дальнейшего чтения можно найти here.

Я бы также рекомендовал использовать UI Framework, например ionic, и добавить cordova-plugins, например ionic-plugin-keyboard, например. улучшенная клавиатура (Cordova UI docs).

источник

2016-09-15 07:24:46 Beat

Это отлично работает! Это должен быть канонический ответ на этот вопрос для Кордовы. Надеюсь, у него есть тонны upvotes :) –

Вы должны установить размер шрифта и высоту в формате PX не в формате «VH», потому что VH работает в соответствии с размером экрана. Я исправил эту проблему, используя PX.

Пожалуйста, загляните в код пера

источник

2016-09-15 07:12:48

http://codepen.io/santoshkhalse/pen/YGqZqR –

Здравствуйте, Сантош, спасибо, но я хочу, чтобы весь макет выполнялся относительно размера видового экрана (включая размеры шрифта и т. Д.). Я просто хочу, чтобы это * не изменилось после первоначального макета *. Это будет на устройствах с очень разными разрешениями, поэтому размеры пикселей не будут работать хорошо. –

Вы можете написать onFous jQuery. означает, что когда вы фокусируетесь на типе ввода, время CSS должно быть таким, каким я предоставлял (в PX), и после блеска он будет в VH. –

Как сохранить макет без изменений при отображении клавиатуры?

ответ

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