태블릿 회전 시 화면이 축소되는 현상 때문에 헤메는 나

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 = '';
    }