为啥 Google Chrome 会影响我的 CSS @media-queries？
Posted
技术标签:
【中文标题】为啥 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 上搜索了一段时间以找到解决方案，但我不知道如何解决。
感谢您的帮助！
【问题讨论】：
【参考方案1】：抱歉，我还不能发表评论，但您是否尝试过使用 px 而不是 portrait / landscape 设置 @media query ？
我很确定您的问题是，正如您所说，您的屏幕设备的大小，当键盘打开时，计算结果为 with / height 它变成了您浏览器视角的肖像......
我认为在更大屏幕的智能手机或平板电脑上不会发生同样的情况，不管使用的是哪种浏览器。至少你可以给它一个机会，试着澄清你的疑问:)
【讨论】：
以上是关于为啥 Google Chrome 会影响我的 CSS @media-queries？的主要内容，如果未能解决你的问题，请参考以下文章
为啥在 Firefox 中向 google Drive Sheet 发出的这个 CORS 请求会失败？ （在 Chrome 中工作）
为啥我的 CSS3 动画在 Google Chrome 中不流畅（但在其他浏览器上非常流畅）？