移动端强制横竖屏问题

最新推荐文章于 2023-09-15 14:35:08 发布

aiaodang6241

最新推荐文章于 2023-09-15 14:35:08 发布

阅读量251

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/liuqiaoqin/p/6638062.html

版权

项目要求:

微信公众号网页强制横屏(不管用户是否开启竖排方向锁定)

拖了几个月还没将这篇写完....都快忘光了....

竖屏（portrait）横屏（landscape）

<!--判断是否是横屏状态还是竖屏状态-->
<script language="javascript" type="text/javascript">
//屏幕方向标识，0横屏，其他值竖屏
var orientation=0;
//转屏事件
function screenOrientationEvent(){
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
$print = $('#print');
$jstargetDIV=$('#js-targetDIV');
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%');
$jstargetDIV.width(width);
$jstargetDIV.height(height);
$jstargetDIV.css('top', 0 );
$jstargetDIV.css('left', 0 );
$jstargetDIV.css('transform' , 'none');
$jstargetDIV.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%');
$jstargetDIV.width(height);
$jstargetDIV.height(width);
$jstargetDIV.css('top', (height-width)/2 );
$jstargetDIV.css('left', 0-(height-width)/2 );
$jstargetDIV.css('transform' , 'rotate(90deg)');
$jstargetDIV.css('transform-origin' , '50% 50%');
}
}
var innerWidthTmp = window.innerWidth;
//横竖屏事件监听方法
function screenOrientationListener(){
try{
var iw = window.innerWidth;
//屏幕方向改变处理
if(iw != innerWidthTmp){
if(iw>window.innerHeight)orientation = 90;
else orientation = 0;//横屏
//调用转屏事件
screenOrientationEvent();
innerWidthTmp = iw;
}
} catch(e){alert(e);};
//间隔固定事件检查是否转屏
setTimeout("screenOrientationListener()",100);
}
//启动横竖屏事件监听
screenOrientationListener();
</script>

<!--用js控制横竖屏宽高样式-->

}, false);

</script>

做横竖屏需要考虑横竖屏的样式问题,大体的最好统一,就能减少很多的css样式

 @media screen and (orientation: portrait) {
        html{
            width : 100% ;
            height : 100% ;
            background-color: green ;
            overflow : hidden;
        }
        body{
            width : 100% ;
            height : 100% ;
            background-color: red ;
            overflow : hidden;
        }
        #print{
            position : absolute ;
            background-color: yellow ;
        }
    }
        @media screen and (orientation: landscape) {
        html{
            width : 100% ;
            height : 100% ;
            background-color: deeppink ;
        }
        body{
            width : 100% ;
            height : 100% ;
            background-color: blue ;
        }
        .print{
            position : absolute ;
            top : 0 ;
            left : 0 ;
            width : 100% ;
            height : 100% ;
            overflow: scroll;
        }
       
    }

注意看好html的print,这个是核心哦

<body >
  <div id="print" class="print">
         
   </div>
</body>

就是靠print来旋转的

看别人的不如自己来练手!

如果有写错的请多多指教!虚心接受

转载于:https://www.cnblogs.com/liuqiaoqin/p/6638062.html

aiaodang6241

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端强制横竖屏问题

项目要求:微信公众号网页强制横屏(不管用户是否开启竖排方向锁定)拖了几个月还没将这篇写完....都快忘光了....竖屏（portrait）横屏（landscape）<script language="javascript" type="text/javascript">//屏幕方向标识，0横...
复制链接

扫一扫