为什么 Google Chrome 会影响我的 CSS @media-queries？答案

【问题标题】：Why Google Chrome is a affecting to my CSS @media-queries?为什么 Google Chrome 会影响我的 CSS @media-queries？
【发布时间】：2017-11-04 09:12:14
【问题描述】：

我知道这个问题可能会引起混淆，但我的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 上搜索了一段时间以找到解决方案，但我不知道如何解决。

感谢您的帮助！

【问题讨论】：

标签： android html css media-queries

【解决方案1】：

抱歉，我还不能发表评论，但您是否尝试过使用 px 而不是 portrait / landscape 设置 @media query ？

我很确定您的问题是，正如您所说，您的屏幕设备的大小，当键盘打开时，计算结果为 with / height 它变成了您浏览器视角的肖像......

我认为在更大屏幕的智能手机或平板电脑上不会发生同样的情况，不管使用的是哪种浏览器。至少你可以给它一个机会，试着澄清你的疑问:)

【讨论】：