Экранная стилизация при активной виртуальной клавиатуре

В идеале я хотел бы, чтобы весь интерфейс имел пользовательский стиль, который отображается на ios (itouch/ipad) или эквивалент андроида с присутствующей виртуальной клавиатурой. Подробнее см. Ниже.

Пользовательский набор правил взлома CSS, который должен быть активным, когда клавиатура "присутствует", также является приемлемым решением.

Настраивает как андроиды, так и ios на веб-сайте (HTML/JavaScript/CSS) Также обратите внимание, что макет внутри: "жидкость".

Изменить: Это был больше дизайн, затем текст; Таким образом, изменения не дезориентируют. На самом низком уровне я просто хочу изменить дизайн с помощью и без виртуальных клавиш (возможно, просто изменение фона).

Вопрос, который является хорошей или плохой конструктивной идеей, является спорным. Однако, я чувствую, что это не имеет отношения к вопросу. Для такого эксплойта может использоваться больше текста (например, игр или интерактивных носителей).

Следовательно, щедрость: Несмотря на то, что больше не нужен ответ для проекта, над которым я работал (использовался альтернативный дизайн). Я все еще верю, что этот вопрос может выиграть от ответа.

Поведение по умолчанию

                       +--------+ 
                       |        |
+------------+       +-+-hidden-+-+   <- ~50% hidden
| +--------+ |       | +--------+ |
| |        | |       | |visible | |
| |        | |   \   | |        | |   <- ~50% visible
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Желаемое поведение

+------------+       +------------+   
| +--------+ |       | +--------+ |
| |        | |       | |visible | |   <- 100% visible (example styling)
| |        | |   \   | |        | |      Custom Styling
| |  100%  | |  ==>  | +--------+ |
| |        | |   /   | |virtual | |
| |        | |       | |  keys  | |
| +--------+ |       | +--------+ |
+------------+       +------------+

Ответы

Ответ 1

Я не уверен, это желаемый эффект?. проверьте эту ссылку

http://jsfiddle.net/UHdCw/3/

Обновление

(1). Предположим, что его сайт и работает в браузере устройства. Затем мы можем проверить наличие виртуальной клавиатуры, проверив размер экрана.

Проверка браузера устройства - http://jsfiddle.net/UHdCw/8/show/

code: - http://jsfiddle.net/UHdCw/8/

(2). Если вы создаете собственное приложение с HTML5 и Phonegap, все будет по-другому. Поскольку для проверки статуса keybord нет прямого API-интерфейса, мы должны написать наш собственный плагин в Phonegap.

В Android вы можете проверить отображение/скрытие статуса клавиатуры, используя собственный код [здесь). и вам нужно написать плагин Phonegap, чтобы получить эти события в нашем HTML.

[Phonegap - пример. Я думаю, что большая часть html для встроенных фреймворков имеет такой вид счастья, чтобы зацепиться за собственный код]

обновление iOS

Как вы сказали, нет изменений высоты/положения, когда клавиатура присутствует. Мы можем сделать одно, когда ввод получает фокус, мы можем добавить класс сокращения и уменьшить размеры элементов. Проверьте следующую ссылку.

http://jsfiddle.net/UHdCw/28/show/

Ответ 2

Я столкнулся с той же проблемой, это работает для меня:

<!-- Android Viewport height fix-->
<script type="text/javascript">
var isAndroid = navigator.userAgent.toLowerCase().indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
    document.write('<meta name="viewport" content="width=device-width,height='+window.innerHeight+', initial-scale=1.0">');
}
</script>

Ответ 3

Попросите JavaScript применить класс к телу, когда элемент ввода имеет focus.

$("input, textarea").focus(function(){  $(document.body).addClass('when-keyboard-showing');     });
$("input, textarea").blur( function(){  $(document.body).removeClass('when-keyboard-showing');  });

И затем используйте @media запросы, чтобы определить, есть ли мобильный вид:

@media (max-width:550px) { 
    body.keyboard-up .header { height:0; padding:0; }
}

Комбинация позволит вам стилизовать страницу, когда клавиатура установлена ​​на мобильном устройстве. Спасибо.