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

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

您没有从您的网站 post 完整 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

using media screen and (orientation: portrait) 意思是什么时候屏幕的宽度大于它的高度，当软键盘弹出时屏幕的宽度变得大于高度所以发生

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

Text sizes change when soft keyboard pops up

css

mobile-website