弹出软键盘时文字大小会发生变化

Question

我在移动设备上设计了一个这样的网页：

但是当我点击文字输入并弹出键盘时，文字大小会完全改变：

我的css代码如下：

@media screen and (orientation: portrait) {
    #div_pword_content {
        width: 100%;
    }
    #div_pword_content h1 {
        font-size: 40px;
    }
    #edt_password {
        width: 300px;
        height: 40px;
        font-size: 30px;
    }
}

#div_pword_content {
    text-align: center;
    margin: auto;
}

导致此问题的原因是什么？如何解决？

Answer 1

您没有从您的网站发布整个CSS。你有CSS：

@media screen and (orientation: landscape) {
    #div_pword_content {
        font-size: 40px;
    }
}

当您尝试输入密码时会触发。为什么会出现问题？

非常有趣，因为您处于portait视图但是当显示键盘时，可用屏幕的宽度高于高度，并且方向更改为landscape。

要解决此问题，您必须添加landscape媒体查询：

#div_pword_content h1 {
    font-size: 40px;
}

换句话说，设置h1的字体大小，因为只是纵向设置而丢失。看起来h1默认设置为2em，这使得它的字体大小为80px（至少在Firefox中）。

Answer 2

尝试使用特定的宽度检查点。如下 -

@media screen and (max-width: 500px) {
  # rest of your code is here
}

Answer 3

使用媒体屏幕和（方向：肖像）意味着屏幕的宽度何时大于其高度，当软键盘弹出时，屏幕的宽度变得大于高度，以便发生