Question

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

该网站被设计为仅在屏幕宽度大于1024px或屏幕宽度小于1024px且设备为纵向时显示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>

Answer 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}

由于移动键盘，HTML表单更改了网页大小

2 个答案: