个人中心
gpt4 book ai didi

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

转载 作者：太空狗 更新时间：2023-10-29 13:26:13 25 4
gpt4 key购买 nike

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

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

@media screen and (orientation: landscape) {

}

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

最佳答案

简短的回答:

不，不幸的是，当前没有检测虚拟键盘何时出现在屏幕上的方法。检测方向是的，可以使用:

  1. css 媒体查询(按照你的例子)
  2. 通过使用 orientationchange 监听器的 JavaScript。
  3. 通过 JavaScript 使用 resize 监听器并使用 window.innerHeight > window.innerWidth 推断方向

长答案:

应该没有理由为什么键盘会影响 orientation 属性，该属性由您的 css 媒体查询解释如下:

@media screen and (orientation: landscape) {
    ...
}

W3C media queries recomendation为 orientation 属性声明以下内容:

The ‘orientation’ media feature is ‘portrait’ when the value of the ‘height’ media feature is greater than or equal to the value of the ‘width’ media feature. Otherwise ‘orientation’ is ‘landscape’.

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

我过去曾在使用设备模拟器时遇到过您的问题，例如旧版 Google Chrome 开发工具中的设备模式。然而，当它在真实的移动设备上进行测试时，问题并没有发生。

还有这个bug在移动 chrome 中打开可能会导致在出现键盘时触发调整大小事件。

也许模拟器(如果您使用的是模拟器)错误地导致视口(viewport)高度发生变化，从而导致媒体查询中的 orientation 属性发生变化。

我在下面提供的简单要点执行以下操作(您可以尝试在您的开发环境中运行它以查看会发生什么):

  1. 当移动设备处于纵向时，屏幕会显示两个表单输入字段(显示文字:“foo”和“baz”)。
  2. 当我触摸任一表单输入字段时，会显示键盘并且页面内容没有变化。
  3. 当设备旋转 90 度为横向时，会出现一个灰色面板，显示以下文字:“将设备旋转为纵向”

注意:上面列出的步骤是在几个运行 iOS 上的 Safari 和 Android 上的移动 Chrome(...不是模拟器!)的真实移动设备上测试下面的要点时发生的。

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>StackOveflow question 40175207</title>
    <meta name="description" content="Example gist using orientation css media query to hsow message when device is landscape" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
<style type="text/css">

body {
    padding: 0;
    margin: 0;
}

.wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.message-panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: gray;
    -webkit-transform: translateX(100%);
            transform: translateX(100%);

    will-change: transform;
}

.message-panel__text {
    position: absolute;
    top: 50%;
    text-align: center;
    font: 1em Helvetica, sans-serif;
    width: 100%;
    height: 50px;
    margin: auto;
    -webkit-transform: translateX(-50%);
            transform: translateY(-50%);
}

@media screen and (orientation: landscape) {
    .message-panel {
        transform: translateX(0);
    }
}

</style>

</head>
<body>
    <div class="wrapper">
        <form>
            <input type="text" name="input-one" value="foo">
            <input type="text" name="input-two" value="baz">
        </form>
        <div class="message-panel">
            <div class="message-panel__text">Rotate your device to portrait</div>
        </div>
    </div>
</body>
</html>

PS:Android 版 Chrome 中还有 Web App Manifest，它也允许您锁定设备的方向。参见 here了解更多信息。

希望这对您有所帮助!

关于javascript - 在 javascript 中检测屏幕上的虚拟键盘和横向，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40175207/

25 4 0
文章推荐： asp.net-mvc - 为什么 ApplicationInsights.config 文件在添加到 Github 存储库时被自动忽略
文章推荐： javascript - ReactJS:如何确定应用程序是在移动浏览器还是桌面浏览器上查看
文章推荐： Git 没有那个文件或目录
文章推荐： android - 如何在 FrameLayout 中排列元素？
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com