@media（方向：纵向）未检测到浏览器窗口的变化答案

【问题标题】：@media (orientation: portrait) not detecting change in browser window@media（方向：纵向）未检测到浏览器窗口的变化
【发布时间】：2017-05-18 04:12:55
【问题描述】：

我写的代码如下：

<!doctype html>

<html lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="test.css">     
  </head>
  <body>
  </body>
</html>

“test.css”文件的内容类似：

body { 
  background-image: url("home-bg-slow-alt.gif");
  background-repeat: no-repeat;
}

@media (orientation: landscape) {
  body {
    background-size: 100vw auto;        
  }
}

@media (orientation: portrait) {
  body {
    background-size: auto 100vh;    
  }
}

但是每当我查看 html 文件时，无论我使用哪种浏览器，或者我将窗口做得多薄，纵向查询都不会在桌面上生效。

我知道“背景尺寸：封面”应该保持图像的纵横比并不断覆盖整个页面，但由于某种原因，这种方法在某些移动浏览器上显示异常。

有没有办法根据视口宽度与高度的比较来运行媒体查询？我相信方向方法实际上是在检测我的屏幕大小，而不是视口的实际大小。

【问题讨论】：

标签： media-queries

【解决方案1】：

将screen 添加到您的媒体查询中，它应该可以工作。

@media screen and (...

【讨论】：