javascript - HTML 表单因移动键盘而改变网页大小

Question

我正在尝试为网站编写基本登录表单的前端。我是一名网络开发新手，在设计网站的移动版本时遇到了一些问题。你可以到我的网站here找到源代码以及我网站上的表格图片 here .

该网站设计为仅在屏幕宽度大于 1024 像素或屏幕宽度小于 1024 像素且设备处于纵向时显示 UI。这是故意的，当不满足这些规范时this显示。

但是，当我处于纵向模式并单击表单时，this瞬间显示。但是它很快就消失了，我很确定这是因为一旦网页显示“不支持的屏幕尺寸”页面，该表单就不再存在于网页上。这使得键盘向下滑动，页面恢复正常。为了解决这个问题，我引用了here , 但是网页还是打不开。

然后我尝试删除“不支持的屏幕尺寸”页面(可以找到此源代码 here )，但是 this当我点击表格时的结果。我很确定这是因为我已将 html 和 body 的高度设置为 100%。

理想情况下，我想制作一个网页，当屏幕尺寸确实不受支持(或方向错误)时保留“不受支持的屏幕尺寸”页面，但是当在移动网站上单击表单时，我想要使原始网页不改变大小但使其可在键盘顶部滚动。再一次，我是一个新手(这是我第一次从事前端开发)，我很感激任何帮助或建议来解决这个问题。提前致谢。

Answer 1

当我完成简单的元素并且我想隐藏在某种类型的设备上时，我将使用 css @media 规则，如下例(调整窗口大小以查看文本变化)

@media only screen and (max-width: 768px) {
        .small-screen{
             display:inherit;
             background-color: red;
        }
        .large-screen {
            display:none;
        }
    }
    
@media only screen and (min-width: 769px) {
        .small-screen{
             display:none;
        }
        .large-screen{
             display:inherit;
             background-color: blue;
        }
    }

<span class="small-screen">show me on a small screen</span>
<span class="large-screen">show me on a large screen</span>