본문 바로가기
Study Note/css

모바일 width100%, viewport scale 안먹을 경우

by 시뮝 2020. 2. 28.
728x90

디바이스 사이즈와 기존 body 사이즈의 스케일을 체크하여 meta 태그 속성을 업데이트 하는 소스입니다.

 

//<head> 내 사전준비 태그
<meta name="viewport" content="width=device-width, initial-scale=1.0>


//<script> 내 온로드 소스에 삽입
//가로/세로모드 체크하여 가져오기
let w = Number(window.orientation == 0 ? screen.width : screen.height);  

//body의 width
let ww = document.getElementsByTagName("body")[0].offsetWidth; 

//meta 속성 값 준비
let per = w/ww; 
let attr  ='minimum-scale='+per+', initial-scale='+per+', maximum-scale='+per+', width=device-width, user-scalable=yes';

//meta 속성 값 세팅
$(document.getElementsByName('viewport')).attr('content', per); 

 

 

728x90

'Study Note > css' 카테고리의 다른 글

css #왼쪽 오른쪽만 배경 이미지 블러처리  (0) 2023.01.27

댓글