判断移动端浏览器横屏竖屏功能

 

方法1：CSS

@media (orientation: portrait) { } 横屏
@media (orientation: landscape) { }竖屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏

 

方法2：JS

//判断手机横竖屏状态：
function hengshuping(){
  if(window.orientation==180||window.orientation==0){
        alert("竖屏状态！")       
   }
if(window.orientation==90||window.orientation==-90){
        alert("横屏状态！")        
    }
 }
 
 hengshuping();
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
 
//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。
//从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange，进行执行

 

 

方法3：

//屏幕方向标识，0横屏，其他值竖屏
var orientation=0;
//转屏事件，内部功能可以自定义
function screenOrientationEvent(){
    if(orientation == 0)document.getElementById("change").value="竖";
    else document.getElementById("change").value="横";
}
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);};
    //间隔固定事件检查是否转屏，默认500毫秒
    setTimeout("screenOrientationListener()",500);
}
//启动横竖屏事件监听
screenOrientationListener();