Получить высоту области просмотра при включенной программной клавиатуре
Я пытался сделать эту работу уже несколько дней, но безуспешно, поэтому я решил поделиться информацией, и, возможно, кто-то придумает решение.
Я хочу получить точный размер области просмотра, когда программная клавиатура включена. В настоящее время я использую следующий код в заголовке, чтобы сайт был отзывчивым:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
Я понял, что когда появляется программная клавиатура, она использует высоту устройства в качестве высоты области просмотра и перемещает остальную часть сайта вверх - что заставляет меня предположить, что она получает высоту из опции width = device-width.
Используя следующий код после запуска программной клавиатуры:
setTimeout(function() {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'height=auto');
}, 300)
А затем получение высоты с помощью jquery показывает ПРАВИЛЬНЫЕ результаты на Android - так называемый видимый размер области просмотра БЕЗ виртуальной клавиатуры, но не на iOS. Я получаю случайное число, которое, как я полагаю, связано с отсутствием остальной части метатега, поэтому я получаю увеличенную версию веб-сайта вместе с числом, например, 75 или 100 (на iphone 4s).
Я также попытался создать фиксированный элемент после поднятия клавиатуры, заставив его использовать высоту области просмотра с верхом:0; и снизу:0; атрибуты, но я все еще получаю исходную высоту.
Что ближе к этому, так это установка высоты метатега области просмотра на фиксированное значение, которое может быть подобрано с помощью jquery $(window).height(), что означает, что метатег действительно имеет значение после инициации клавиатуры, но для фиксированной высоты не существует истинного значения.
Я видел много тем по этому поводу, но ни одна из них не имела решения. У кого-нибудь есть решение для этого?
10 ответов
В том виде, в котором я хотел получить высоту оставшегося экрана после включения виртуальной клавиатуры, я использовал абсолютно переполненный элемент, который покрывал весь экран, используя высоту экрана, и содержимое всей страницы находилось внутри него. В результате виртуальная клавиатура открывалась в ТОП переполненного элемента, не меняя его размеров.
Чтобы решить конкретную проблему, все, что у меня было, - это изменить положение этого элемента на статическое и устранить переполнение при открытии виртуальной клавиатуры - фактически при изменении виртуальной клавиатуры (по умолчанию элементы изменяют положение на статическое) изменяет поведение ЭТОГО по умолчанию. Вот почему фиксированные элементы становятся статичными.
Надеюсь, это поможет.
2022
Теперь вы можете комбинироватьwindow resizeслушатель сwindow.visualViewport.heightсвойство (у которого очень хорошая совместимость ):
window.addEventListener('resize', () => {
// For the rare legacy browsers that don't support it
if (!window.visualViewport) {
return
}
console.log(window.visualViewport.height)
})
2023
Новая функция 2022 года. Отлично работает в Chrome и Firefox. Добавьте «interactive-widget=resizes-content» в область просмотра метатегов.
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
Действительно подходит для моей цели
Размеры области просмотра зависят от размера UIWebView элемент.
Как уже упоминалось в предыдущем ответе, есть два способа адаптации к экранной клавиатуре. Вы можете изменить размер представления или настроить содержимое вкладок.
Размеры видового экрана на iOS сообщают о размере вида, поэтому изменение размера будет корректировать видовой экран. Safari регулирует вставки и сохраняет вид одинаковым, чтобы область просмотра не изменялась.
Если вы предполагаете, что сенсорные устройства обычно используют экранную информацию, а не внешние клавиатуры, вы можете программно регулировать размер самостоятельно, беря высоту или ширину устройства в зависимости от ориентации и множителя для части экрана, потребляемой устройством. на экранной клавиатуре.
Я использую класс области просмотра, чтобы действовать в качестве прокси, чтобы дать мне наиболее вероятные реальные размеры области просмотра, а не отчеты браузера и привязывать к элементам ввода, чтобы отслеживать состояние элементов ввода и изменения ориентации, чтобы динамически изменять множитель, применяемый при запросе размеров области просмотра.
По состоянию на март 2021 года window.innerHeight отражает наличие мягкой клавиатуры на iPad в браузерах Chrome, Firefox и Safari под управлением IOS 14.4.1.
Я столкнулся с той же проблемой, и через некоторое время, смешав CSS и немного javascript, я нашел решение.
Заметки:
- Я использовал jQuery и SCSS
- Я предпочел скрыть элемент, а не менять его положение (просто и эффективно)
- Элемент отображается, если виртуальная клавиатура закрыта, но ввод все еще находится в фокусе. Для этого я обернул правило css на экран медиа-запроса @media и (min-aspect-ratio: 11/16). 11/16, потому что это меньше, чем обычное соотношение 9/16 (наличие виртуальной клавиатуры увеличивает это соотношение, тогда применяется правило)
Решение:
Сначала скрипт (с использованием jQuery):
$(document).on('focus', 'input, textarea', function(){
$('body').addClass("fixfixed");
});
$(document).on('blur', 'input, textarea', function(){
$('body').removeClass("fixfixed");
});
Таким образом, пока пользователь фокусируется на вводе текста, а виртуальная клавиатура открыта, тело имеет класс "fixfixed".
Затем CSS (я использую SCSS):
.fixfixed{
@media screen and (min-aspect-ratio: 11/16) {
.bottomThingToHideWhenVirtualKeyboardIsShown{
opacity: 0;
pointer-events: none;
}
}
}
И это все!
Надеюсь, это поможет кому-то!
Я придумал этот взломать:
var storedWidth = 0;
var storedHheight = 0;
function onResize() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var screenWidth = screen.width || windowWidth;
var screenHeight = screen.height || windowHeight;
var width, height;
if(screenWidth < screenHeight) {
if(windowWidth > storedWidth) storedWidth = windowWidth;
if(windowHeight > storedHeight) storedHeight = windowHeight;
width = storedWidth;
height = storedHeight;
}else {
width = windowWidth;
height = windowHeight;
}
//use width and height from here
}
Теперь это потерпит неудачу в двух случаях:
screen.width / screen.height не поддерживается; это отступило бы к ошибочным измерениям jquery. В моем случае программная клавиатура делала высоту меньше ширины в портретном режиме, поэтому размеры jQuery привели к ложному ландшафтному режиму и, таким образом, отображению сообщения "поверните устройство".
страница открыта с открытой программной клавиатурой, что я считаю спорным. Кроме того, после его скрытия сохраняется наибольшая высота, поэтому после этого все будет исправлено.
Замечания:
window.innerWidth / window.innerHeight может использоваться для устранения зависимости jQuery
Приведенный выше код предназначен для устранения проблемы с клавиатурой в портретном режиме, но такое же решение можно использовать для ландшафтного режима.
Это решение немного запутанное, но оно может работать...
- Определите, активна ли клавиатура.
- Захватите ширину / высоту области просмотра
- Вычтите высоту клавиатуры.
Просто чтобы дать вам представление, когда клавиатура появляется на iOS по умолчанию, она ничего не делает с базовым видом прокрутки.
Если ваш контент отображается в пользовательском UIWebViewПрограммист должен либо:
Измените размер прокрутки, чтобы избежать попадания недоступного контента под клавиатуру.
Настройте вкладки содержимого прокрутки (рекомендуется). Размер прокрутки остается прежним, но в нижней части добавляется "рамка", чтобы пользователь мог прокрутить все содержимое.
Я не уверен, как какое-либо решение влияет на viewport, но вы могли бы попробовать оба.
Однако, если ваш веб-контент представлен Safari, Apple подгоняет вкладки под вас.
Штука пытается вернуть приблизительный window.innerWidth, window.innerHeight значения в ios6 ua; JQuery используется для селекторов и .on(), Не уверен насчет определения части событий клавиатуры устройства ios; см ссылки на ресурсы
Пытаться
CSS
html {
height : 100vh;
width : 100vw;
}
JS
$(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/
как обрабатывать ключевые события в 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