일기

티스토리 모바일웹 비활성화 (최신 코드)

hijkl2e 2022. 9. 19. 04:28

왜 하나요?

사람마다 이유가 다르겠지만 나의 경우는 스킨 편집 때문이다.
티스토리 모바일웹은 PC 버전과 달리 스킨 편집이 불가능하다.
모바일웹을 비활성화시키면 어떠한 브라우저에서 접속하든 일관된 디자인을 보여줄 수 있다.

 

하지만 티스토리는 모바일웹을 완전히 비활성화시키는 방법을 제공하지 않는다.
그래서 우리는 여러 꼼수를 이용하여 모바일웹으로 접속하면 PC 버전 페이지로 리다이렉션되도록 만들 것이다.

다른 블로그에도 관련 자료 많던데요?

많은 블로그에서 관련 자료를 제공하고 있다.
대부분 자바스크립트 코드를 업로드하고 구글 애널리틱스 플러그인을 이용하여 해당 코드를 실행하는 방식이다.
하지만 여기서는 더 발전된 코드를 통하여 아래와 같은 장점을 제공한다.

1. 모바일웹 홈페이지에 접속하여도 PC 버전으로 리다이렉션된다.

타 블로그에서 제공하는 코드의 경우 게시글은 리다이렉션되지만 홈페이지는 정상 접속되는 경우가 많다.

게시글 링크 예시: https://hijkl2e.tistory.com/m/5
홈페이지 링크 예시: https://hijkl2e.tistory.com/m

여기서 제공하는 코드를 적용하면 두 링크 모두 PC 버전으로 정상적으로 리다이렉션된다.

2. 티스토리 어플에서 접속해도 PC 버전으로 보인다.

타 블로그에서 제공하는 코드의 경우 티스토리 어플에서는 모바일웹 페이지가 그대로 보이는 경우가 많다.
여기서 제공하는 코드를 적용하면 티스토리 어플에서 접속하여도 PC 버전 페이지가 보인다.
리다이렉션된다는 표현을 사용하지 않는 이유는 이 경우 리다이렉션이 아닌 Ajax를 이용하기 때문이다.

3. 개발자 모드 콘솔에 오류가 발생하지 않는다.

그다지 중요하지 않은 부분이다.

그래서 어떻게 하나요?

귀찮아서 스크린샷은 업로드하지 않는다.
이해가 어렵다면 타 블로그 자료를 참고하고 코드 부분만 여기서 제공하는 코드를 사용하면 된다.

1. 모바일웹 자동 연결 해제

블로그관리 - 꾸미기 - 모바일
티스토리 모바일웹 자동 연결을 사용하지 않습니다.
하단에 변경사항 저장 클릭

2. 자바스크립트 코드 작성

타 블로그에 비하여 코드가 조금 길다.

let href = location.href;
if (href.includes('/m/'))
	href = href.replace('/m/', '/');
else if (href.endsWith('/m'))
	href = href.substr(0, href.length - 2);
if (location.href !== href)
	if (navigator.userAgent.includes('Tistory')) {
		const req = new XMLHttpRequest();
		req.addEventListener('load', () => {
			document.documentElement.innerHTML = req.responseText;
			hljs.highlightAll();
		});
		req.open('GET', href);
		req.send();
	} else
		location.href = href;

복사해서 redirect.js로 저장한다. 파일명은 변경해도 상관 없다.
또는 아래 링크에서 파일을 다운로드한다.

redirect.js
0.00MB

3. 자바스크립트 코드 업로드

블로그관리 - 꾸미기 - 스킨 편집
우측 상단에 html 편집 - 파일업로드
우측 하단에 추가 - redirect.js 파일 선택
파일 목록에 redirect.js 파일이 추가된다.

 

마우스 커서를 redirect.js 파일 위에 올려 놓고 - 오른쪽 클릭 - 링크 주소 복사
크롬 브라우저 기준이며 타 브라우저에서는 '링크 주소 복사' 메뉴가 없을 수도 있다.
하지만 대부분 유사한 이름의 메뉴가 존재하니 잘 찾아보면 된다.
예를 들어, 파이어폭스 브라우저의 경우 '링크 복사' 메뉴가 존재한다.

 

복사한 링크를 메모장 등에 잘 보관해야 한다.

4. 구글 애널리틱스 플러그인 사용

블로그관리 - 플러그인
구글 애널리틱스 클릭
측정 ID 또는 추적 ID에 다음 코드를 붙여넣는다.

(2023/04/28 개발자 도구 콘솔에 오류 뜨지 않도록 코드 수정하였습니다)

');</script><script src='방금 전에 복사한 링크'></script><script>('

'방금 전에 복사한 링크'는 이전 단계에서 복사한 링크로 대체하면 된다.
예를 들자면 다음과 같다.

');</script><script src='https://tistory~/~/~/redirect.js'></script><script>('

하단에 적용 클릭

잘 안되나요?

2022년 9월 19일 기준으로 위의 방법은 정상 작동합니다.
잘 안되는 경우 댓글을 남겨주세요.

끝

끝