在javascript中检测屏幕上的虚拟键盘和横向

我正在开发一款基于html的移动应用程序，该应用程序的设计要求只针对纵向，并在用户进入横向时向用户显示消息，此功能在css媒体查询中运行良好，但问题在于，我在应用程序中有一个表单，当我单击任何文本框时，虚拟键盘打开，屏幕高度改变，并向我显示方向改变的消息

现在我想问一下，当实际方向改变时，以及当屏幕上出现虚拟键盘时，是否有任何不同的方法。 提前谢谢

@media screen and (orientation: landscape) {

}

---

我已经检查了与stackoverflow主题相关的其他问题，但没有任何帮助

您无法检测是否存在仅使用CSS的虚拟键盘。您需要使用一些javascript

如果您使用Cordova构建应用程序，请尝试使用键盘插件。无论何时显示或隐藏键盘，它都会触发一个事件，以便您能够以某种方式对其作出响应，即向

添加一些类，以防止显示消息

另一种方法是倾听所有可能导致键盘出现的元素的“焦点”事件

$(document.body).on("focus", "textarea, input", function() {
   $(document.body).addClass("do-not-show-message");
}).on("blur", "textarea, input", function() {
   $(document.body).removeClass("do-not-show-message");
});;

简单的回答是： 不，遗憾的是，目前没有检测虚拟键盘何时出现在屏幕上的方法。检测方向是的，可以使用：

css媒体查询（根据您的示例）

通过JavaScript使用

orientationchange

侦听器

通过JavaScript使用

resize

侦听器并使用

window.innerHeight>window.innerWidth

答案很长： 键盘没有理由影响css媒体查询解释的

方向

属性，如下所示：

@媒体屏幕和（方向：横向）{
...
}

W3C对

方向属性声明如下：

当“高度”媒体功能的值大于或等于“宽度”媒体功能的值时，“方向”媒体功能为“纵向”。否则，“方向”就是“景观”

在表单文本框字段中键入时可见的键盘不应触发
方向
属性的更改

我曾经在使用设备模拟器时遇到过您的问题，例如在旧版本的Google Chrome开发工具中的设备模式。但是，在实际移动设备上测试时，问题并未出现

此外，mobile chrome中存在此漏洞，当键盘出现时，可能会触发调整大小事件

如果您使用的是emulator，那么它可能会错误地导致视口高度发生更改，从而导致媒体查询中的
方向属性发生更改

我在下面提供的简单要点如下（您可以尝试在您的开发环境中运行它，看看会发生什么）：

当移动设备处于纵向时，屏幕显示两个表单输入字段（显示单词：“foo”和“baz”）
当我触摸任意一个表单输入字段时，将显示键盘，页面内容不会发生任何更改
当设备旋转90度至横向时，会出现一个灰色面板，显示文字：“将设备旋转至纵向”
注意：上面列出的步骤是在几个在iOS上运行Safari和Android上运行mobile Chrome的真实移动设备（不是模拟器！）上测试以下要点时发生的


StackOveflow问题40175207
身体{
填充：0；
保证金：0；
}
.包装纸{
位置：绝对位置；
宽度：100%；
身高：100%；
溢出：隐藏；
填充：0；
保证金：0；
}
.留言板{
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
背景：灰色；
-webkit转换：translateX（100%）；
转化：translateX（100%）；
改变：转变；
}
.message-panel\uuu文本{
位置：绝对位置；
最高：50%；
文本对齐：居中；
字体：1em Helvetica，无衬线；
宽度：100%；
高度：50px；
保证金：自动；
-webkit转换：translateX（-50%）；
转化：translateY（-50%）；
}
@媒体屏幕和屏幕（方向：横向）{
.留言板{
变换：translateX（0）；
}
}
将设备旋转到纵向

PS：Chrome for Android中也有Web应用程序清单，允许您锁定设备的方向。有关更多信息，请参阅

希望这有帮助
 我在用HTML设计聊天视图时遇到了麻烦。标题位于顶部，内容中心和聊天字段位于底部。最后，这就是我选择的解决方案


布局的Flexbox
flexbox的高度设置为100vh
因为100vh在Safari中有问题，所以使用js检测Safari并设置为100%

这把小提琴展示了我的解决方案


var isSafari=/^（（？！chrome | android）。*safari/i.test（navigator.userAgent）；
如果（伊萨法里）{
document.body.className=“is safari”；
}
html，
身体{
填充：0；
保证金：0；
}
.聊天{
显示器：flex；
弯曲方向：立柱；
调整内容：灵活启动；
对齐项目：拉伸；
对齐内容：拉伸；
宽度：100%；
高度：100vh；
背景：白色；
}
.这是狩猎.聊天{
身高：100%；
}
.聊天室标题，
.聊天室页脚{
背景：白烟；
高度：60px；
}
.聊天室{
弹性：1；
}

聊天视图
标题
身体
页脚