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

  • 相关阅读:
    18_09_05 textarea高度自适应 和 Z-index
    18_08_20 jQuery 获取URL中的参数
    18_08_20 jQuery 光标聚焦文字之后
    18_08_20 jQuery 将前台 多张图片 和 多个附件 转化为 附件 向后台请求
    18_8_20 Bootstrap ul标题太多的处理方式
    Http (java)的post和get方式
    18_8_20 java 时间延后的通用写法
    iOS设计模式-组合
    iOS设计模式-迭代器
    iOS设计模式-观察者
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4221137.html
Copyright © 2011-2022 走看看