横竖屏监测及设置html字体大小

/* 横屏竖屏 */
    (function (): void {
      const supportOrientation = (typeof window.orientation === 'number' &&
        typeof window.onorientationchange === 'object');
      const init = function (): void {
        const htmlNode: any = document.body.parentNode;
        let orientation;
        const updateOrientation = function (): void {
          if (supportOrientation) {
            orientation = window.orientation;
            switch (orientation) {
              case 90:
              case -90:
                orientation = 'landscape';
                break;
              default:
                orientation = 'portrait';
                break;
            }
          } else {
            orientation = (window.innerWidth > window.innerHeight) ? 'landscape' : 'portrait';
          }
          // htmlNode.setAttribute('class', orientation);
          if (orientation === 'landscape') {
            //  document.getElementsByTagName('html')[0].style.fontSize = (window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) * 100 / 320 + 'px'; // 这一种方式设置好的字体大小与真正想设置的有出入,且用window.innerWidth发现刚开始就是横屏字体会相对由竖屏转为横屏后小。屏幕可用工作区宽度 window.screen.availWidth,下面的可以
          // index.html中已经做了该步,否则就得把该句加进来 document.getElementsByTagName('html')[0].style.fontSize = (window.screen.availWidth > window.screen.availHeight ? window.screen.availHeight : window.screen.availWidth) * 100 / 320 + 'px'; 
          } else {
            // document.getElementsByTagName('html')[0].style.fontSize = (window.innerWidth > window.innerHeight ? window.innerHeight : window.innerWidth) * 100 / 320 + 'px';
          //  document.getElementsByTagName('html')[0].style.fontSize = (window.screen.availWidth > window.screen.availHeight ? window.screen.availHeight : window.screen.availWidth) * 100 / 320 + 'px';
          }
        };
        if (supportOrientation) {
          window.addEventListener('orientationchange', function (): void {
            updateOrientation();
          }, false);
        } else {
          // 监听resize事件
          window.addEventListener('resize', function (): void {
            updateOrientation();
          }, false);
        }
        updateOrientation();
      };
      window.addEventListener('DOMContentLoaded', init, false);
    })();
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值