zoukankan      html  css  js  c++  java
  • 移动端的视频窗口自适应宽屏竖屏

    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

  • 相关阅读:
    DataTables 控件使用和心得 (2)
    dataTables 添加行内操作按钮
    datatables 配套bootstrap3样式使用小结(1)
    loadrunner总体使用篇
    使用CEF类库处理HTTP请求
    27部优秀的黑客纪录片
    CEF3开发者系列之进程和线程
    cef3的各个接口你知道几个
    [你必须知道的.NET]第二十九回:.NET十年(上)
    [你必须知道的.NET]第二十八回:说说Name这回事儿
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4221137.html
Copyright © 2011-2022 走看看