方向锁定 -> 背景不显示

Question

我在我的移动网站上添加了“锁定”方向的媒体查询，但我的背景图片根本没有显示

我刚刚使用了这个然后添加了我的样式表https://api.jquerymobile.com/orientationchange/

CSS

body {
    padding:0;
    margin:0;
    font-family:Open-sans;
    background-repeat: no-repeat;
    background-image:url('paintingOg.gif');
    background-color:grey;
    background-size:100%;
}

@media (orientation: portrait) {
  body {
    transform:rotate(-90deg);
    background-image:url('paintingOg.gif');
  }
}

HTML

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="Lmob.css">
<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="//code.jquery.com/mobile/1.5.0-alpha.1/jquery.mobile-1.5.0-alpha.1.min.js"></script>
</head>
<body style="background-image:url('images/paintingOg.gif');">
<h1 id="orientation">orientationchange Not Supported on this Device.      </h1>

 <script>
 $( window ).on( "orientationchange", function( event ) {
  $( "#orientation" ).text( "This device is in " + event.orientation + " mode!" );
});

// You can also manually force this event to fire.
$( window ).orientationchange();
</script>

Answer 1

我发现下面我的问题脚本的解决方案与 back-image 的预期一样有效，尽管它没有完全“锁定”方向

body {
    padding:0;
    margin:0;
    font-family:Open-sans;
    background-repeat: no-repeat;
    background-image:url('images/PaintingOg.gif');
    background-color:grey;
    background-size:100%;
}

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

方向锁定 -> 背景不显示

Orientation lock -> background not showing

html

jquery

css

mobile

jquery-mobile