移动设备竖屏/横屏

1) 设置竖屏/横屏

->竖屏 @media screen and (orientation:portrait){...}

@media screen and (orientation:portrait) {

.a .b{position:static;clear:both;float:right;padding-top:5px;}

.a a.c{float:left;margin:0 0 0 5px;padding:0;width:65%;}

.a .b .d{position:static;}

}

->横屏 @media screen and (orientation:landscape){...}

@media screen and (orientation:landscape) {

.a .b{position:static;clear:both;float:right;padding-top:5px;}

.a a.c{float:left;margin:0 0 0 5px;padding:0;width:65%;}

.a .b .d{position:static;}

}

2) 屏幕像素变换

页面尺寸变化

$(window).resize(function(){

...

});

横屏竖屏切换变化

$(window).bind( 'orientationchange', function(e){ 

...

});

判断当前是横屏还是竖屏：

if (window.orientation == 90 || window.orientation == -90) {…}

//ipad、iphone竖屏；Andriod横屏

if (window.orientation == 0 || window.orientation == 180) {…}

//ipad、iphone横屏；Andriod竖屏

转载于:https://www.cnblogs.com/nimoer/p/4107817.html