Получите высоту видового экрана, когда включена мягкая клавиатура

Я пытаюсь сделать эту работу целыми днями, не повезло, поэтому я решил поделиться информацией и, возможно, кто-то придумает решение.

Я хочу получить точный размер видового экрана, когда работает мягкая клавиатура. В настоящее время я использую следующий код в заголовке, чтобы сайт мог реагировать:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

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

Используя следующий код после запуска мягкой клавиатуры:

setTimeout(function() {  
    viewport = document.querySelector("meta[name=viewport]");
    viewport.setAttribute('content', 'height=auto');
}, 300)

И затем получение высоты с помощью jquery показывает результаты CORRECT на Android - иначе видимый размер видового экрана БЕЗ виртуальной клавиатуры, но не на iOS. Я получаю случайное число, которое я предполагаю, что остальные метатеги не существуют, поэтому я получаю увеличенную версию веб-сайта и число, например, 75 или 100 (на iphone 4s).

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

Что ближе к этому, устанавливается высота метатега видового экрана до фиксированного значения, которое может быть получено jquery $(window).height(), что означает, что метатег фактически имеет значение после запуска клавиатуры, но есть нет истинного значения для фиксированной высоты.

Я видел много тем вокруг этого, но ни один с решением. Любой, у кого есть решение для этого?

Ответ 1

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

Чтобы исправить конкретную проблему, все, что у меня было, это изменить положение этого элемента на статичное и удалить переполнение при открытии виртуальной клавиатуры. Фактически ios изменяет это поведение по умолчанию при выдаче его виртуальная клавиатура (меняет элементы на статическую позицию), поэтому фиксированные элементы становятся статическими.

Надеюсь, это поможет.

Ответ 2

Размеры окна просмотра зависят от размера элемента UIWebView.

Как уже упоминалось в предыдущем ответе есть два способа справиться с адаптацией к экранной клавиатуре. Вы можете изменить размер представления или настроить вставки содержимого.

Размеры окна просмотра в iOS сообщают размер представления, поэтому изменение размера будет изменять область просмотра. Safari настраивает вставки и сохраняет вид того же размера, чтобы окно просмотра не менялось.

Если вы должны были сделать предположения, что сенсорные устройства обычно используют на экране ввода, а не на внешних клавиатурах, вы можете программно настроить размер самостоятельно, принимая высоту или ширину устройства в зависимости от ориентации и коэффициента в множителе для части экрана потребляемый экранной клавиатурой.

Я использую класс viewport для работы в качестве прокси-сервера, чтобы дать мне наиболее вероятные реальные размеры видовых экранов, а не сообщено браузером, и связывается с элементами ввода для отслеживания состояния элементов ввода и изменений ориентации для динамического изменения множителя, применяемого при запросе размеров окна просмотра.

Ответ 3

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

Если ваш контент отображается в пользовательском UIWebView, то для программиста может быть либо:

Измените размер прокрутки, чтобы избежать получения недоступного содержимого под клавиатурой.
Отрегулируйте вкладки содержимого прокрутки (рекомендуется). Размер scrollview остается таким же, но "граница" добавляется снизу, поэтому пользователь может прокручивать все содержимое.

Я не уверен, как любое решение влияет на viewport, но вы можете попробовать оба.

Если ваш веб-контент предоставляется Safari, Apple настраивает для вас вставки.

Ответ 4

Это решение немного запутанно, но оно может работать...

Определите, активна ли клавиатура или нет.
Захват ширины/высоты видового экрана
Вычесть высоту клавиатуры.

Ответ 5

Я нашел себя с той же проблемой, и после некоторого смешивания CSS и немного javascript я нашел решение.

Примечания:

Я использовал jQuery и SCSS
Я предпочел скрыть элемент вместо изменения его позиции (простой и эффективный)
Элемент отображается, если виртуальная клавиатура закрыта, но вход все еще находится в фокусе. Для этого я завернул правило css в медиа-запросе @media screen и (min-aspect-ratio: 11/16). 11/16, потому что это меньше, чем общее соотношение 9/16 (наличие виртуальной клавиатуры увеличивает это соотношение, тогда применяется правило).

Решение:

Сначала script (используя jQuery):

$(document).on('focus', 'input, textarea', function(){
    $('body').addClass("fixfixed");
});

$(document).on('blur', 'input, textarea', function(){
    $('body').removeClass("fixfixed");
});

Итак, пока пользователь фокусируется на текстовом вводе и виртуальная клавиатура открыта, тело имеет класс с фиксированным набором.

Затем, CSS (я использую SCSS):

.fixfixed{
  @media screen and (min-aspect-ratio: 11/16) {
    .bottomThingToHideWhenVirtualKeyboardIsShown{
      opacity: 0;
      pointer-events: none;
    }
  }
}

И что это!

Надеюсь, это поможет кому-то!

Ответ 6

Piece пытается вернуть приблизительные значения window.innerWidth, window.innerHeight на ios6 ua; jquery, используемый для селекторов и .on(). Не определенно об обнаружении части событий клавиатуры устройства ios; см. ссылки ресурсов

Try

css

html {
    height : 100vh;
    width : 100vw;
}

$(function() {    
    if (/ipad|iphone/gi.test(window.navigator.userAgent)) {
    var events = "abort blur focus input scroll submit touchstart touchmove";
    $("form, input").on(events, function(e) {
      return (function(window, elem, w, h) {
               var vh = window.getComputedStyle(elem,null).getPropertyValue(h);
               var vw = window.getComputedStyle(elem,null).getPropertyValue(w);
               var vwh = { 
                           "documentWidth": vw, 
                           "documentHeight": vh, 
                           "windowInnerWidth": window.innerWidth, 
                           "windowInnerHeight": window.innerHeight
                         };
               console.log(vwh);
               var _vwh = document.getElementById("vwh");
               _vwh.innerHTML = JSON.stringify(vwh)
               return vwh 
              }(window, document.documentElement, "width", "height"));
    }).focus();
    };
})

jsfiddle http://jsfiddle.net/guest271314/Pv3N2/

Ресурсы

https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

http://www.w3.org/TR/2013/CR-css3-values-20130730/#vh-unit

как обрабатывать ключевые события в iphone

https://coderwall.com/p/xuawww Отвечая на события клавиатуры в iOS

http://looksok.wordpress.com/2013/02/02/ios-tutorial-hide-keyboard-after-return-done-key-press-in-uitextfield/ Учебное пособие по iOS: скрыть клавиатуру после возврата/сделать нажатие клавиши в UITextField

https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveControl/InteractiveControl.html#//apple_ref/doc/uid/TP40008032-CH16

http://www.quirksmode.org/mobile/viewports2.html