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

  • 相关阅读:
    JAVA课上课后问题总结(2019.09.20)
    JAVA课后问题汇总(第三次课)
    java课后作业:记录创建对象数
    《程序员修炼之道》读后感(一)【第二章与第三章】
    [java web]小学四则运算出题系统
    apache连接数
    isql导出表到文本
    iis6上的FTP有缓存
    Perl 标量的操作符
    apachetomcat
  • 原文地址:https://www.cnblogs.com/pengpenglin/p/4221137.html
Copyright © 2011-2022 走看看