说明:这个的原文章来自于https://www.jianshu.com/p/9c3264f4a405 ,我做点点补充 ,谢谢原链接的小姐姐
最近公司是要我做一个h5的小视频,因为是视频接视频,并且源文件就是横屏的,所以要求点击网址一进入就是横屏的状态。。。。。
<body style="margin: 0px;height: 100%;padding: 0;" class="webpBack">
<span id="print" >
<span id="changeIt">
啦啦啦
</span>
</span>
</body>
下面的代码要注意啦~~~~注意点:因为你在自己的代码上去套这个样式,你可以在竖屏的情况下设一个颜色 ,横屏的时候设另外一个颜色,在这两种状态下去调css,还有我当初习惯了写行内样式,半天出不来~~~~所以最好用class。。。。
/* 竖屏 */
@media screen and (orientation: portrait) {
html{
width : 100% ;
height : 100% ;
overflow : hidden;
/* background-color:yellow; */
}
body{
width : 100% ;
height : 100% ;
overflow : hidden;
}
#print{
position : absolute ; }
.enterDiv{
height: 100%;
width: 100%;
position: relative;
left: 0;
}
}
/* 横屏 */
@media screen and (orientation: landscape) {
html{
width : 100% ;
height : 100% ;
/* background-color:red; */
}
body{
width : 100% ;
height : 100% ;
}
#print{
position : absolute ;
top : 0 ;
left : 0 ;
width : 100% ;
height : 100% ;
}
.backgroundEnter{
width: 100%;
position: absolute;
top: 0;
left: 0;
}
}
#print span{
margin: auto ;
margin-top : 20px ;
text-align: center;
}
横屏的js
下面要注意的是:刚开始我的苹果6s打死都不起作用,但是别人的6s可以,大部分的安卓机起作用,我的6s出现的状况是第一次竖屏是正常的,进入横屏状态也是正常的，当我回来到竖屏的时候,就不行了,为什么?下面的if-else的判断，else里面死都进不去,我都想重写全部的css了,我也怀疑过是不是document.documentElement.clientWidth;是不是不适合去获取宽高,并不是,而是在转屏的时候,手机需要切换结束后获取到的宽高才是正确的,所以监听的里面我们做一个0.5秒的延迟就可以了 ........
<script>
// 试试横屏
let width = document.documentElement.clientWidth;
let height = document.documentElement.clientHeight;
if (width < height) {
console.log(width + "哈哈哈 " + height);
$print = $('#print');
$print.width(height);
$print.height(width);
$print.css('top', (height - width) / 2);
$print.css('left', 0 - (height - width) / 2);
$print.css('transform', 'rotate(90deg)');
$print.css('transform-origin', '50% 50%');
}
var evt = "onorientationchange" in window ? "orientationchange" : "resize";
console.log(evt, 'evt')
window.addEventListener(evt, function() {
// window.localtion.reload();
setTimeout(function(){
var width =document.documentElement.clientWidth;
var height = document.documentElement.clientHeight; $print = $('#print');
$videoIntroduce=$('#videoIntroduce')
$toVideoBack=$('#toVideoBack')
$backgroundImg=$('.backgroundImg')
if (width > height) {
$print.width(width);
$print.height(height);
$print.css('top', '0');
$print.css('left', 0);
$print.css('transform', 'none');
$print.css('transform-origin', '50% 50%');
} else{ $print.width(height); $print.height(width); $print.css('top', (height - width) / 2); $print.css('left', 0 - (height - width) / 2); $print.css('transform', 'rotate(90deg)'); $print.css('transform-origin', '50% 50%'); } }, 500) }, false);
之前有看到评论说做延迟,但是不知道出现什么样的情况去做,也不知道为什么,错过就知道了