Question

我编写的代码如下：

<!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>

＆＃34; test.css＆＃34;文件同样读取：

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文件时，纵向方向查询都不会在桌面上生效，无论我使用哪种浏览器，或者我制作窗口有多薄。

我知道＆＃34;背景大小：封面＆＃34;应该保持图像的宽高比并不断覆盖整个页面，但由于某种原因，这种方法在某些移动浏览器上显示奇怪。

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

Answer 1

将screen添加到您的媒体查询中，它应该有效。

@media screen and (...

@media（方向：肖像）未检测到浏览器窗口中的更改

1 个答案: