时间戳

首页 > 解决方案 > 使用智能手机键盘外观处理绝对布局

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

问题描述

因此，我一直在尝试实现移动视图的登录页面，您可以在此处看到：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查看快速代码）

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

从那里，将打开一个列表并检查 Nexus 5X。此处描述了该过程：如何在 chrome 开发工具中调出移动键盘？ 要切换键盘，只需单击屏幕选项（更改方向）并选择纵向 - 键盘

我认为这可能是原因中的代码：（您也可以在笔中看到相同的代码）

.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 来放置元素，我找不到合适的方法来应用此布局，同时在键盘降低主体尺寸时使其工作。

非常感谢 ！

标签： javascripthtmlcssresponsive

解决方案

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

如果您不知道如何执行此操作，请参阅此处阅读有关@media查询的信息。

另一种选择（如果您不想使用@media 查询）是侦听输入focus和blur事件（焦点表示选择了输入，模糊表示不再选择）并使用 javascript 切换徽标。

推荐阅读