Android 为什么Google Chrome会影响我的CSS@媒体查询？

我知道这个问题可能会引起混淆，但我的

CSS@media查询

有问题，特别是屏幕方向

我在我的页面的

上有以下内容：

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">

所以问题是，当我按下一个

，[这只发生在我的Android设备上，]并且当键盘打开进行写入时，浏览器会将我的屏幕识别为横向屏幕，因此我的

CSS@media querys

正在为横向屏幕应用样式

但奇怪的是，只有当

是

type=“text”

或

type=“password”

时才会发生这种情况，否则问题就不会发生

我认为这是因为当键盘打开时，它将浏览器窗口的大小调整为其他大小，（在某些设备上）被识别为横向，因为窗口宽度大于窗口高度

我在谷歌上搜索了一段时间，想找到一个解决方案，但我不知道如何修复它

---

谢谢你的帮助

很抱歉，我还不能发表评论，但您是否尝试使用

px

而不是

纵向/横向

设置

@媒体查询

我很确定你的问题是，正如你所说的，当键盘打开时，屏幕设备的大小，作为计算的结果，随着高度的增加，它就变成了你浏览器视角的肖像

我估计在更大的屏幕上，无论是智能手机还是平板电脑，都不会出现同样的情况，无论使用哪种浏览器。至少你可以给它一个机会，试着澄清你的疑问：）

@media screen and (orientation: portrait) {

        #login_container {
            width: 60%;
        }
    }