javascript - 使用智能手机键盘外观处理绝对布局

Question

所以，我一直在尝试为移动 View 实现一个登陆页面，您可以在这里看到:https://i.imgur.com/4Ju5XGs.png到目前为止它工作正常。

但是一旦用户想要输入他的用户名和密码，Android 键盘就会出现，我的问题就会出现，如您所见:https://i.imgur.com/uT4LKrQ.png

我的元素( Logo 和表单)是通过绝对位置放置的，无论屏幕尺寸如何，布局都保持在适当的位置。我怀疑这是我的主要问题。

这是一个非常非常快速的笔来展示问题的全部:https://codepen.io/Gallow/full/BeLWVG (https://codepen.io/Gallow/pen/BeLWVG 查看快速代码)

为了使 android 键盘出现，您必须从 chrome 调试菜单中启用 Toogle Device Toolbar，然后单击以选择一个设备并单击编辑。

从那里，将打开一个列表并检查 Nexus 5X。该过程在此处描述:How to bring up mobile keyboard in chrome dev tools?要切换键盘，只需单击屏幕选项(以更改方向)并选择纵向 - 键盘

我认为这可能是代码的原因:(您也可以在笔中看到相同的代码)

.logo
{
    position : absolute;
    z-index: 100;
    width: 80%;
    left: 10%;
    top: 7.5%;
}
.container__action
{
    position: absolute;
    z-index: 100;
    bottom: 5%;
    width: 80%;
    left : 10%;
    text-align: center;
}

如您所见，一切都是通过绝对放置的。随着键盘的出现， body 的尺寸急剧减小，导致表格向上移动并将自己置于 Logo 前面。

如果不使用 absolute 来放置元素，我找不到合适的方法来应用此布局，同时在键盘降低主体尺寸时使其工作。

非常感谢!

Answer 1

我的建议是将您的 CSS 分成两部分，一个在非常正方形的纵横比下方(例如 1:1，您必须查看在什么纵横比下获得的分辨率)并设置 Logo 的 display 到 none(这是键盘可见时非常常见的解决方案)。

如果您不知道如何执行此操作，请参阅阅读 here关于@media 查询。

另一个选项(如果你不想使用@media 查询)是监听输入的 focus 和 blur 事件(focus 意味着输入被选中，blur表示它不再被选中)并使用 javascript 切换 Logo 。