为什么Google Chrome会影响我的CSS @ media-queries?

时间:2017-06-02 21:32:13

标签: android html css media-queries

我知道这个问题可能引起混淆,但我的CSS @media queries出现问题,特别是屏幕方向问题。

我在我的页面的<head>上有这个:

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

一个简单的CSS @media queries,当屏幕为人像时会更改元素的样式

@media screen and (orientation: portrait) {

        #login_container {
            width: 60%;
        }
    }

问题是当我按下<input type="text">,[仅在Android设备上发生]时,当打开键盘进行写入时,浏览器会识别我的屏幕为横向,因此 CSS @media queries正在应用横向屏幕样式

但关于一切的奇怪之处在于它只会在<input>type="text"type="password"时发生,否则,问题就不会发生。

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

我一直在Google上寻找解决方案,但我无法知道如何修复它。

感谢您的帮助!

1 个答案:

答案 0 :(得分:0)

很抱歉,我还无法发表评论,但您是否尝试使用@media query代替px设置portrait / landscape

我很确定您的问题是,正如您所说的,屏幕设备的大小,当打开keyborad时,结果作为带/高度的计算,它变成了浏览器视角的肖像......

我认为在大屏幕智能手机和平板电脑上不会发生相同的情况,从不使用哪种浏览器。至少你可以给它一个机会并尝试澄清你的怀疑:)