移动端的视频窗口自适应宽屏竖屏

 

1.移动端的视频播放，用的是公司的极酷阳光播放器。该播放器宽高是固定的，如果想在移动端是横屏与竖屏都是自适应展示，用的是zoom属性，强制界面自动缩放。下边是js代码：

<script>
function orient() {

if (window.orientation == 0 || window.orientation == 180) {    
var width = document.body.clientWidth;
var isscale = width / 650;
$("#CuPlayer").css("zoom", isscale);
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
var width = document.body.clientWidth;
var isscale = width / 650;
$("#CuPlayer").css("zoom", isscale);
return false;
}
}

//页面加载时调用
$(function () {
orient();
});

//用户变化屏幕方向时调用
$(window).bind('orientationchange', function (e) {
orient();
});
</script>

 

    屏幕方向对应的window.orientation值：

    ipad： 90 或 -90 横屏

    ipad： 0 或180 竖屏

    Andriod：0 或180 横屏

    Andriod： 90 或 -90 竖屏

 

   

  

2.用在移动端及pc端的字体的设置

　　http://ued.ctrip.com/blog/?p=3589

移动端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

 

pc端(含Mac)项目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

 

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

 

 信息来源：http://ued.ctrip.com/blog/?p=3589