태블릿 회전 시 화면이 축소되는 현상 때문에 헤메는 나
2025. 1. 17. 10:04ㆍ카테고리 없음
const firstWidth = window.innerWidth;
const firstHeight = window.innerHeight;
function fixLayout() {
const aspectRatio = firstWidth / firstHeight; // 초기 화면의 너비와 높이 비율
const currentAspectRatio = window.innerWidth / window.innerHeight;
if (currentAspectRatio !== aspectRatio) {
document.body.style.transform = `scale(${Math.min(window.innerWidth / 1056, window.innerHeight / 1524)})`;
document.body.style.transformOrigin = 'top left';
} else {
document.body.style.transform = ''; // 비율이 맞으면 원래대로
}
}
window.addEventListener('resize', fixLayout);
window.addEventListener('orientationchange', fixLayout);
fixLayout(); // 초기 실행
var ratio = window.innerHeight / document.body.clientHeight;
document.body.style.transform = 'scale('+ratio+')';
2442 / 1524
3913 / 1524
1692/1056
4224/1056
function orientationEventHandler() {
//if(window.orientation) {
var orientation = window.orientation;
if(orientation == 90 || orientation == -90) { // switch로 case 90, -90, 0 각각 처리해도 되고
//회전했을 경우 처리
alert( $(window).width() );
//alert( window.innerWidth );
} else {
//회전안했을 경우 처리
alert( $(window).width() );
//alert( window.innerWidth );
}
//}
}
document.body.style.transform = `scale(${scaleFactor})`;
document.body.style.transformOrigin = 'top left';
window.addEventListener('resize', fixLayout);
window.addEventListener('orientationchange', fixLayout);
function fixLayout() {
// 처음 가로 (긴 변)
// 처음 세로 (짧은 변)
var long = window.innerWidth > window.innerHeight ? window.innerWidth : window.innerHeight;
var short = window.innerWidth < window.innerHeight ? window.innerWidth : window.innerHeight;
if(window.orientation == 0 || window.orientation == 180) {
// 세로일 때
var ratio = long / document.body.clientHeight;
} else if(orientation == 90 || orientation == -90) { 처리해도 되고
// 가로일 때
var ratio = short / document.body.clientHeight;
}
document.body.style.transformOrigin = 'top left';
document.body.style.transform = 'scale('+ratio+')';
}
// 0 , 180 세로
// 90, -90 가로
// 종종 모바일 기기이나 userAgent에 잡히지 않는 경우가 있어 maxTouchPoints로 판단하기도 함
if (navigator.maxTouchPoints > 4) {
document.body.style.overflow = '';
}