首页 > 代码库 > 移动设备竖屏/横屏
移动设备竖屏/横屏
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竖屏
移动设备竖屏/横屏