Question

我一直试图让这项工作好几天，没有运气，所以我想我会分享信息，也许有人想出一个解决方案。

我想在软键盘启动时获得确切的视口大小。我目前在标题上使用以下代码，以便网站响应：

<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上显示CORRECT结果 - 也就是没有虚拟键盘的可见视口大小，但在iOS上没有。我得到一个随机数，我假设其余的元标记不存在，所以我得到一个放大版本的网站以及75或100（在iphone 4s上）

我也尝试在键盘上方创建一个固定元素，使其使用top：0的视口高度;和底部：0;属性，但我仍然得到原来的高度。

更接近这一点的是将视口元标记高度设置为固定值，可以通过jquery的$(window).height()获取，这意味着元标记在启动键盘后实际上有所不同，但是固定高度没有真正的价值。

我已经看到很多关于此的主题，但没有一个解决方案。有解决方案吗？

Answer 1

视口尺寸来自UIWebView元素的大小。

如previous answer中所述，有两种方法可以处理适应屏幕键盘的问题。您可以调整视图大小或调整内容插入。

iOS上视口的尺寸是报告视图的大小，因此调整大小会调整视口。 Safari会调整插图并使视图保持相同的大小，以便视口不会更改。

如果您假设触摸设备通常在屏幕输入而不是外部键盘上使用，您可以通过设备高度或宽度自行调整大小，具体取决于方向和因素在屏幕的一部分乘数由屏幕键盘消耗。

我利用视口类充当代理，为我提供最可能的实际视口尺寸而不是浏览器报告并绑定到输入元素以跟踪输入元素的状态和方向更改，以动态修改请求视口尺寸时应用的乘数

Answer 2

在视图中我想在虚拟键盘打开后获取剩余屏幕的高度，我使用了一个绝对溢出的元素，它使用屏幕高度和内容覆盖了整个屏幕。整页都在里面。结果，虚拟键盘在溢出元素的TOP上打开，而不改变其尺寸。

要修复特定问题，我所拥有的只是将此元素的位置更改为静态并在打开虚拟键盘时删除溢出 - 实际上ios在发出时默认更改为此行为虚拟键盘（将元素更改为静态位置），这就是固定元素变为静态的原因。

我希望这会有所帮助。

Answer 3

我发现自己遇到了同样的问题，经过一段时间混合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"); });

因此，当用户专注于文本输入并且虚拟键盘处于打开状态时，身体会有一个固定的＆＃39;类。

然后，CSS（我使用SCSS）：

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

那就是它！

希望它有所帮助！

Answer 4

截至 2021 年 3 月，window.innerHeight 反映了 iPad 在运行 IOS 14.4.1 的 chrome、firefox、safari 浏览器中软键盘的存在

Answer 5

只是为了给你一个想法，当键盘默认出现在iOS上时，它在底层的scrollview上什么都不做。

如果您的内容以自定义UIWebView显示，则由程序员决定：

调整滚动视图的大小，以避免在键盘下显示无法访问的内容。
调整scrollview的内容插入（推荐）。滚动视图大小保持不变，但边框为＆＃34;添加到底部，以便用户可以滚动所有内容。

我不确定任何一种解决方案如何影响viewport，但您可以同时尝试这两种解决方案。

如果您的网络内容由Safari呈现，Apple会为您调整插图。

Answer 6

这个解决方案有点复杂，但可能有用......

Detect whether or not the keyboard is active.
抓住视口宽度/高度
减去键盘的高度。

Answer 7

我想出了这个黑客：

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依赖
上面的代码是以纵向模式修复键盘问题，但同样的解决方案可以用于横向模式

Answer 8

试图在ios6 ua返回近似window.innerWidth，window.innerHeight值; 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/#vh-unit

how to handle key events in 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

软键盘打开时获取视口高度

8 个答案: