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

【问题标题】：Handling absolute layout with smartphone keyboard appearance使用智能手机键盘外观处理绝对布局
【发布时间】：2019-05-14 04:27:33
【问题描述】：

所以，我一直在尝试实现移动视图的登录页面，您可以在此处看到：https://i.imgur.com/4Ju5XGs.png 到目前为止它运行良好。

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

我的元素（徽标和表单）通过绝对位置放置，以使布局保持在适当的位置，无论屏幕大小如何。我怀疑这是我的主要问题。

这是一个非常快速的笔来展示问题的全部内容：https://codepen.io/Gallow/full/BeLWVG（https://codepen.io/Gallow/pen/BeLWVG 以查看快速代码）

为了使安卓键盘出现，您必须从 chrome 调试菜单中启用 Toogle 设备工具栏，然后单击选择设备并单击编辑。

从那里，将打开一个列表并检查 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;
}

如您所见，一切都是通过绝对放置的。随着键盘的出现，身体的大小急剧减小，这导致表单向上移动并将自己放在徽标的前面。

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

非常感谢！

【问题讨论】：

标签： javascript html css responsive

【解决方案1】：

我的建议是将你的 CSS 分成两部分，一个低于非常方正的纵横比（比如 1:1，你必须看看你在什么纵横比上得到什么分辨率）并将标志的 display 设置为 @ 987654323@（这是键盘可见时非常常见的解决方案）。

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

另一个选项（如果您不想使用@media 查询）是监听输入的focus 和blur 事件（焦点意味着输入被选中，模糊意味着它不再被选中）并切换使用 javascript 的徽标。

【讨论】：