/* 横屏竖屏 */
(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);
})();