移動端強制橫豎屏問題

本文轉載自查看原文 2017-06-22 16:08 2241

項目要求:

微信公眾號網頁強制橫屏(不管用戶是否開啟豎排方向鎖定)

拖了幾個月還沒將這篇寫完....都快忘光了....

豎屏（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來旋轉的

看別人的不如自己來練手!

如果有寫錯的請多多指教!虛心接受

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 關於解決微信移動端橫豎屏切換的問題。【移動端】cordova 更改app的圖標、名字、加載畫面以及強制橫豎屏【原】js檢測移動端橫豎屏 H5移動端橫豎屏切換移動端判斷手機橫豎屏狀態移動端如何強制頁面橫屏移動端如何讓頁面強制橫屏關於移動端頁面強制豎屏移動端web如何讓頁面強制橫屏移動端強制橫屏顯示