如何解决方向锁定->背景未显示
我添加了此媒体查询,该查询在移动网站上“锁定”了方向,但是我的背景图片根本没有显示
我刚刚使用了它,然后添加了样式表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>
解决方法
我发现以下问题脚本的解决方案可以与背面图像一起使用,尽管它并非完全“锁定”方向
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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。