📱모바일에서 💻pc버전으로 볼 수있도록 구현하기

현재 진행 중인 앱의 admin페이지는 반응형이 적용되어 있지않아 모바일 진입시 화면이 깨져버린다.

이를 위해 모바일화면에선 'pc버전으로보기' 버튼을 추가해 모바일에서도 pc화면과 똑같은 크기로 볼 수 있도록하여 zoom in/out 가능하도록 설정해주려한다.

이를위해 index.html파일의 기기장치를 인식할때 사용되는 viewport메타태그를 변경해주어야한다. index.html파일에서 처음부터 viewport태그를 없애주거나 원하는 스케일로 변경해주면 안될까?싶었지만, pc버전으로 보기 버튼을 만들어주는 App.tsx파일에서 버튼클릭 시 index.html파일의 뷰포트 메타태그를 변경할 수 있도록 만들어주기로하였다.

// index.html
<meta id="initial_viewport" name="viewport" content="width=device-width, initial-scale=1" />

처음 생각한 방법으론 버튼 클릭 후 메타태그를 새로운 메타태그로 갈아끼어주고 싶었지만, 결국 구현 된 방법은 기존 html파일의 메타태그를 삭제해주고 app파일에서 새롭게 생성된 메타태그를 html파일로 넣어준다. 결국 갈아끼워주는 건 맞는건가?(수동적이지만😅)

// app.tsx

let elem = document.getElementById('viewport');
elem?.parentNode?.removeChild(elem);

let addTag = document.createElement('meta');
addTag.setAttribute('id', 'viewport');
addTag.setAttribute('name', 'viewport');
addTag.content = "width=1170, user-scalable=yes, initial-scale=1.0"
document.getElementsByTagName('head')[0].appendChild(addTag);

 

viewport라는 id를 가진 태그를 elem에 할당해주고 elem이 있다면 elem을 삭제해준다.

document.createElement("meta"): meta태그 생성, addTag에 할당

setAttribute을 사용해 addTag에 속성값을 설정해주고

addTag.content = "width=1170, user-scalable=yes, initial-scale=1.0"로 content를 지정해주어 device에 맞는 자동너비가아닌 1170으로 설정해준다.

 

위에서 메타태그를 삭제해주었으니 이제 다시 새롭게 생성한 태그를 추가해준다.

document.getElementsByTagName('head')[0].appendChild(addTag)

 

그럼 이제 생성해둔 pc버전으로보기 버튼을 클릭하면 기존 메타태그가 삭제되고 새로운 메타태그가 추가된다. 끄읕~!~!~!!!