方向锁定 -> 背景不显示
Posted
技术标签:
【中文标题】方向锁定 -> 背景不显示【英文标题】：Orientation lock -> background not showing 【发布时间】：2020-12-23 12:28:09 【问题描述】：我已在我的移动网站上添加了这个“锁定”方向的媒体查询，但我的背景图像根本没有显示
我刚刚使用了这个，然后添加了我的样式表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');
<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>
【问题讨论】：
无法真正复现，能否提供minimal reproducible example？ （另外，transform:rotate(360deg) 的意义何在？）
@CBroe 我发布了我得到代码的地方，我删除了查询 css，现在我得到灰色背景，但不是我的图像
当你删除background-size:100%（用于测试目的）有什么变化吗？
【参考方案1】：
我发现下面我的问题脚本的解决方案可以按预期使用背景图像，尽管它并不完全“锁定”方向
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;
【讨论】：
以上是关于方向锁定 -> 背景不显示的主要内容，如果未能解决你的问题，请参考以下文章
在 iPad 锁定屏幕（背景）上显示 AVAudioplayer 持续时间和经过时间
使用 MPNowPlayingInfoCenter 显示锁定屏幕图像不起作用