HTML 表单因移动键盘而更改网页大小答案

【问题标题】：HTML Form Changes Webpage Size due to Mobile KeyboardHTML 表单因移动键盘而更改网页大小
【发布时间】：2020-03-12 20:41:44
【问题描述】：

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

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

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

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

理想情况下，当屏幕尺寸确实不受支持（或方向错误）时，我想制作一个保留“不受支持的屏幕尺寸”页面的网页，但是当在移动网站上单击表单时，我'想让原始网页不改变大小，但使其可在键盘顶部滚动。同样，我是一个新手（这是我第一次从事前端开发），如果我能解决这个问题，我将不胜感激。提前致谢。

【问题讨论】：

这个问题中有大量的链接，迫使那些想帮助你的人去站外资源只是为了理解你的问题。请减少您问题中的链接数量，并让您的问题自己详细说明您的问题。请查看How to Ask 和minimal reproducible example 了解更多信息。
要添加到 Taplar，其中一些链接是下载，我绝对不会下载任何东西。我想很多人都有同样的感觉。 SO 还提供了一种将图像直接上传到您的答案中的方法。当您必须打开一堆标签来跟踪问题时，问题就很难理解了。

标签： javascript jquery html css mobile

【解决方案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>

【讨论】：

我在我的代码中使用了媒体规则。我只需要知道如何防止移动键盘弹出时页面调整大小，即使网页在键盘后面。

【解决方案2】：

我在移动设备上的表单和键盘也遇到了类似的问题。当我按下输入字段时，键盘会弹出并将页面高度更改为小于宽度，这将使横向规则适用，即使实际上设备是纵向的。

我的解决方案是应用与纵向相同的规则，横向最大宽度相同。

看起来与此类似：

@media screen and (max-device-height:900px) and (max-device-width:415px) and (orientation:portrait){portrait rules}

@media screen and (max-device-width:415px) and (orientation:landscape){portrait rules}

【讨论】：