1.有交互的元素一定要設(shè)interactive屬性為true,否則監(jiān)聽(tīng)的事件都將無(wú)反應(yīng)蛆楞。
2.使用css旋轉(zhuǎn)畫(huà)布的方式會(huì)導(dǎo)致事件響應(yīng)錯(cuò)亂铣卡，應(yīng)該使用內(nèi)置旋轉(zhuǎn)的方法
3.Canvas橫屏適配問(wèn)題。
// 利用 CSS3 旋轉(zhuǎn) 對(duì)根容器逆時(shí)針旋轉(zhuǎn) 90 度
function detectOrient() {
let width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
ratio = _view.height / height;
// 橫屏自適應(yīng)
_view.width = width*ratio;
if (width >= height) {
// 判斷是橫屏
isHorizontalScreen = true;
// 隱藏--橫屏提示
$('#modal').hide();
$('#loading').removeClass('hide');
$('.section').css({
'width': width,
'height': height,
'top': 0,
'left': 0,
'-webkit-transform': 'none',
'transform': 'none',
'-webkit-transform-origin': '0 0',
'transform-origin': '0 0'
});
} else {
// 判斷是豎屏
isHorizontalScreen = true;
// 隱藏--橫屏提示
$('#modal').show();
$('.section').css({
'font-size': '625%',
'width': height,
'height': width,
'top': (height - width) / 2,
'left': -(height - width) / 2,
'-webkit-transform': 'rotate(90deg)',
'transform': 'rotate(90deg)',
'-webkit-transform-origin': 'center center',
'transform-origin': 'center center'
});
}
}
window.onresize = detectOrient;
detectOrient();
