移动端的横屏与竖屏

1. 解决手机横屏竖屏问题

原生

function hengshuping(){ 
　　if(window.orientation==180||window.orientation==0){ 
        alert("竖屏状态！")        
   } 
　 if(window.orientation==90||window.orientation==-90){ 
        alert("横屏状态！")         
   } 
} 
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false); 

 

jquery

$(window).on('orientationchange', function(){
   if(window.orientation==180||window.orientation==0){ 
        alert("竖屏状态！")        
    } 
    if(window.orientation==90||window.orientation==-90){ 
        alert("横屏状态！")         
    }   
});

 

横竖屏设置元素布局

$(window).on('orientationchange', function(){
    var $weixin = $('#weixinTip');
    var $body = $('body');
    
    //解决获取元素切换前的高宽属性
    setTimeout(function(){
        adapterWidth()
    }, 300);
});

 

根据body体的变化 设置合适的left值

function adapterWidth()
{
    var tipWidth = $('#weixinTip').width();
    var bodyWidth = $('body').width();
    var topLeft = (1 - tipWidth/bodyWidth) / 2 * 100 + '%';console.log(topLeft);
    $('#weixinTip').css('left', topLeft);
    $('#whereToBuy').css('left', topLeft);
    $('#showPrint').css('left', topLeft);
}