[Canvas-불꽃놀이-34] 버그 수정 (인앱 브라우저, ios 하단 높이)

[Canvas-불꽃놀이-33] index.js 통합 테스트

이전 글 : [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션) [Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션)이전 글 : [Canvas-불꽃놀이-31] Canvas 클래스 테스트 (파티클 업데이

jinsk-joy.tistory.com

배포를 하고 나서 이런저런 문제가 발생해 수정 기록을 남겨보도록 하겠다.

카카오톡 메신저 인앱 브라우저 탈출

카카오톡으로 링크를 공유해 열어보니 카카오톡 인앱 브라우저를 사용하게 되어 화면 높이를 제대로 인식하지 못하는 문제가 발생했다.

입력 후 불꽃놀이 화면으로 넘어갈 때 입력창 높이가 그대로 남아있어 화면 높이의 절반 가까이 되는 높이에서 불꽃놀이가 시작되었다.

미묘하게 비율도 달라져 링크를 열면 인앱브라우저가 아닌 외부 브라우저로 연결하기로 결정하였다.

다행히 사례를 찾을 수 있어 바로 적용할 수 있었다. (출처 : https://burndogfather.com/271)

적용하기

inappBrowser.js 파일 생성

var inappdeny_exec_vanillajs = (callback) => {
	if (document.readyState !== "loading") {
		callback();
	} else {
		document.addEventListener("DOMContentLoaded", callback);
	}
};
inappdeny_exec_vanillajs(() => {
	var useragt = navigator.userAgent.toLowerCase();
	var target_url = location.href;

	if (useragt.match(/kakaotalk/i)) {
		//카카오톡 외부브라우저로 호출
		location.href = "kakaotalk://web/openExternal?url=" + encodeURIComponent(target_url);
	} else if (useragt.match(/line/i)) {
		//라인 외부브라우저로 호출
		if (target_url.indexOf("?") !== -1) {
			location.href = target_url + "&openExternalBrowser=1";
		} else {
			location.href = target_url + "?openExternalBrowser=1";
		}
	} else if (
		useragt.match(
			/inapp|naver|snapchat|wirtschaftswoche|thunderbird|instagram|everytimeapp|whatsApp|electron|wadiz|aliapp|zumapp|iphone(.*)whale|android(.*)whale|kakaostory|band|twitter|DaumApps|DaumDevice\/mobile|FB_IAB|FB4A|FBAN|FBIOS|FBSS|trill|SamsungBrowser\/[^1]/i,
		)
	) {
		//그외 다른 인앱들
		if (useragt.match(/iphone|ipad|ipod/i)) {
			//아이폰은 강제로 사파리를 실행할 수 없으므로 모바일대응뷰포트강제설정
			var mobile = document.createElement("meta");
			mobile.name = "viewport";
			mobile.content = "width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui";
			document.getElementsByTagName("head")[0].appendChild(mobile);
			//노토산스폰트강제설정
			var fonts = document.createElement("link");
			fonts.href = "https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap";
			document.getElementsByTagName("head")[0].appendChild(fonts);
			document.body.innerHTML =
				"<style>body{margin:0;padding:0;font-family: 'Noto Sans KR', sans-serif;overflow: hidden;height: 100%;}</style><h2 style='padding-top:50px; text-align:center;font-family: 'Noto Sans KR', sans-serif;'>인앱브라우저 호환문제로 인해<br />Safari로 접속해야합니다.</h2><article style='text-align:center; font-size:17px; word-break:keep-all;color:#999;'>아래 버튼을 눌러 Safari를 실행해주세요<br />Safari가 열리면, 주소창을 길게 터치한 뒤,<br />'붙여놓기 및 이동'을 누르면<br />정상적으로 이용할 수 있습니다.<br /><br /><button onclick='inappbrowserout();' style='min-width:180px;margin-top:10px;height:54px;font-weight: 700;background-color:#31408E;color:#fff;border-radius: 4px;font-size:17px;border:0;'>Safari로 열기</button></article><img style='width:70%;margin:50px 15% 0 15%' src='https://tistory3.daumcdn.net/tistory/1893869/skin/images/inappbrowserout.jpeg' />";
		} else {
			//안드로이드는 Chrome이 설치되어있음으로 강제로 스킴실행한다.
			location.href = "intent://" + target_url.replace(/https?:\/\//i, "") + "#Intent;scheme=http;package=com.android.chrome;end";
		}
	}
});

html 파일에 로드해서 사용하기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>불꽃놀이</title>
        <link rel="stylesheet" href="/src/style/style.css" />
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Do+Hyeon&display=swap" rel="stylesheet" />
    </head>
    <body>
        <!-- 생략.... -->

        <script type="module" src="/src/js/inappBrowser.js"></script>
    </body>
</html>

ios 하단 주소창 높이 화면 height에 미반영되는 문제

ios에서 문자열 입력 후 불꽃놀이 화면으로 넘어갈 때 하단 주소창 높이를 반영하지 못하는 버그를 발견하였다. (안드로이드는 정상)

이를 해결하기 위해 ios일 경우 불꽃놀이 화면에서 하단의 주소창 높이만큼을 더해줘야 제대로 된 애니메이션을 볼 수 있다.

적용하기

사용자의 기기가 ios인지 판별하기 위해 정규식과 터치 포인트를 활용한다. (아이폰, 아이패드)
터치 포인트를 사용하는 이유는 아이패드의 경우 Mac으로 나와 터치 포인트를 통해 아이패드인지 macOS인지 구분해야 한다.
터치포인트가 0일 경우 macOS이며 0이상이면 터치가 가능한 아이패드이다.

// constants.js
export const SCREEN = {
	// 생략
    IOS: /Mac|iPhone|iPad|iPod/i, // ios 판별하는 정규식
};

ios에서 화면 하단에 주소창이 있으면 웹페이지의 높이가 정확하게 계산이 안 되는 문제가 있다고 한다.
이를 해결하기 위해 ios일 경우 화면 높이를 따로 계산한다.
document.documentElement.scrollHeight
-. 페이지 전체 높이를 반환한다.
visualViewport.height
-. 현재 사용자가 보고있는 뷰포트의 실제 높이를 반영한다.
위의 두 항목을 빼면 하단 주소창의 높이가 나와 이를 innerHeight에 반영하면 전체 높이를 구할 수 있다.

// CanvasOption.js - 크기를 관리하는 CanvasOption 클래스에서 조정
initCanvasOptionVars() {
    // userAgent가 ios종류이며 터치 포인트가 0이상이면 아이폰, 아이패드이다.
    const isIos = SCREEN.IOS.test(navigator.userAgent) && navigator.maxTouchPoints > 0;
    
    // 아이폰, 아이패드일 경우 하단 주소창의 높이를 구하고 아닌 경우에는 0으로 둔다.
    const bottomAddressBarHeightDiff = isIos ? document.documentElement.scrollHeight - visualViewport.height : 0;

    this.canvasCssHeight = innerHeight + bottomAddressBarHeightDiff;
}

수정 후 화면

'Canvas > 불꽃놀이 프로젝트' 카테고리의 다른 글

[Canvas-불꽃놀이-33] index.js 통합 테스트 (0)	2024.12.21
[Canvas-불꽃놀이-32] Canvas 클래스 단위 테스트 (애니메이션) (2)	2024.12.19
[Canvas-불꽃놀이-31] Canvas 클래스 단위 테스트 (파티클 업데이트) (1)	2024.12.19
[Canvas-불꽃놀이-30] Canvas 클래스 단위 테스트 (파티클 생성) (1)	2024.12.19
[Canvas-불꽃놀이-29] Canvas 클래스 단위 테스트 (텍스트 데이터 생성) (1)	2024.12.17

카카오톡 메신저 인앱 브라우저 탈출

적용하기

ios 하단 주소창 높이 화면 height에 미반영되는 문제

적용하기

수정 후 화면

'Canvas > 불꽃놀이 프로젝트' 카테고리의 다른 글

티스토리툴바

수정 후 화면