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

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

原文地址:https://www.cnblogs.com/pengpenglin/p/4221137.html