IT생활활용

티스토리 자동 목차가 PC 브라우저에서는 보이는데 스마트폰에서는 목차가 안보이는 이유?

산삼인생 2023. 3. 9. 16:45
728x90

 

티스토리 자동 목차 기능 적용 후에 모바일에서는 목차가 안보이는 이유

티스토리에서 자동 목차를 적용하였습니다.

'티스토리 자동 목차 생성' 키워드를 구글에서 검색하면

 

구글에서 '티스토리 자동 목차 생성' 으로 검색

 

많은 글들을 볼 수가 있습니다.

거의 대부분의 글들은 'jquery.toc.js' 파일을 업로드해서 CSS, HTML 서식편집에 적용하는 방법을 가르쳐 줍니다.

저도 글들을 참조를 해서 적용을 해보았습니다.

그런데 문제가 발생을 하였습니다.

분명히 PC에서의 웹브라우저(크롬)에서는 목차가 잘 보이는데,

스마트폰 브라우저(크롬, 사파리, 파이어폭스, 웨일, 엣지, 오페라)에서는 목차가 보이지 않습니다.

PC에서 크롬 웹브라우저로 티스토리 블로그 글 보기

 

 

목차 테스트

목차

    목차

      1.제목-1

      1)제목-2

      (1)제목-3

       

      2.제목-11

      1)제목-22

      (1)제목-33

       

      PC에서 크롬 웹브라우저로 F12를 눌러서 소스코드를 확인하면,

      목차 관련해서 소스코드를 확인할 수 있습니다.

      <head> 속성에서 jquery_toc_min.js 파일 확인가능
      <body> 에서 목차관련 소스코드 확인

      하지만 모바일로 변경을 하면

      자동 목차 생성 관련 소스코드가 보이지 않습니다.

      <head> 속성에서 jquery_toc_min.js 파일 확인이 불가능
      <body> 에서 목차관련 소스코드 확인

      문제점은 모바일 화면에서는 <head> 속성에서 jquery_toc_min.js 스크립트 추가 한 부분이 적용되지 않았습니다.

      관리자 화면에서 스킨 편집을 할때 모바일에서 적용이 안되는것 같습니다.

      모바일일때 불러지는 화면이나, PC에서 불러지는 화면이 달라집니다.

       

      해결방법

      티스토리 블로그는

      모바일로 접속할때 주소에 '/m/' 이 추가적으로 붙습니다.

      PC에서 웹으로 접속하는 페이지 화면과

      스마트폰 같은 모바일에서 접속할때 페이지 화면이 다르다는 것입니다.

      이는 티스토리에서 자동으로 모바일웹 자동 연결 해주는 기능이 있기 때문입니다.

       

      관리자 화면으로 이동합니다.

      왼쪽 메뉴에서 '꾸미기 > 모바일' 메뉴로 진입을 합니다.

       

      티스토리 모바일웹 자동 연결을 '사용합니다' 로 디폴트 설정이 되어 있습니다.

      이 기능으로 인해서 모바일과 PC 페이지가 다르게 되는 것입니다.

      이부분을 '사용하지 않습니다.' 라고 설정을 변경합니다.

      변경을 한다음에 하단에 '변경사항 저장' 버튼을 클릭합니다.

      그러면 스마트폰과 동일한 모바일 기기에서도 목차가 잘 적용이 되는 것을 확인할 수 있습니다.

      어차피 티스토리의 스킨이 반응형 웹으로 되어 있기 때문에

      이부분을 사용하지 않아도 모바일에서 최적화 되어서 화면이 보여집니다.