화면크기 모바일에 맞추기/ Viewport 의 init-scale 자바스크립트로 접근하여 조정하기, clientHeight, window.height, innerHeight

웹사이트 개발시 모바일을 지원하려면 다양한 모바일 기기의 크기에 맞게 작업을 해줘야 합니다. 게다가 모바일 기기는 가로/세로로 변환이 가능하고 사용자가 확대축소 등을 할 수 있기 때문에 , 이러한 다양한 경우에 맞게 크기를 조절해야 합니다.

 

 

아래 코드는 널리 사용되고 있는 코드인데, 검색해보면 아주 많이 검색이 되더라구요...... 정확히 원작자가 누구인지는 잘 모르겠습니다. 

 

function initScale()   {

   var ress = navigator.userAgent;

   if (ress.indexOf("Android 1.", 0) > -1 ){ 

        if (ress.indexOf("480", 0) > -1 ) { // 480x800

            var per = 0.5226824457593688;

        } else if(ress.indexOf("600", 0) > -1 ) { // 600 x 1024

            var per = 0.681

        } else if(ress.indexOf("1280", 0) > -1 ) { // 800 x 1280

            var per = 0.631

        }

    } else {

        var dh = window.innerHeight;

        var dw = window.innerWidth;

        var cw = parseInt( $('#contentsArea').css('width') );

        var ch = parseInt( $('#contentsArea').css('height') );

        var per = dw/cw;

        var per2 =dh/ch;

       

        if(per > per2 ){

            per = per2;

        }

        var gapH = ( dh - (ch*per) )/2;

        var gapW = ( dw - (cw*per) )/2        

     } 

 

     $("#contentsArea").css('transform', 'scale('+per+','+per+')');

     $('body').css('margin-top', gapH );

     $('body').css('margin-left', gapW );

     

}

 

window.onresize = function(){

    initScale();

}

window.onload = function() {

    initScale();

}

 

 

위의 코드처럼 html 문서내의 특정 div (예를 들어 contentsArea) 의 scale 을 조정하는 방식으로 적용이되며, 윈도우가 처음 로드될때, 변경될때마다 호출되어 항상 현재 윈도우에 맞도록 조정해 주게 됩니다.

 

 

조금 간단히 처리할 수 있는 방법은 다음과 같습니다. 여기서 wrap 은 특정 div 의 폭(width)값이며, toFixed 함수는 숫자를 문자열로 바꾸어주는 함수입니다. 

 

스크린크기대비 div 의 비율을 구해, 해당 비율로 scale 값을 변경해 주는 겁니다. 

 

var initial_scale = (screen.width / $('#wrap').width()).toFixed(4);

$('meta[name=viewport]').attr('content','"width=device-width, initial-scale='+initial_scale+', maximum-scale=2.0, user-scalable=yes"');

 

 

$('meta[name=viewport]')  이 부분이 meta 태그에 있는 viewport 를 접근하기위한 코드입니다. viewport 는 보통 페이지 상단에 넣어두는데, 하단부분에서 재설정 하면, 마지막에 설정한 viewport 가 적용되게 됩니다.

 

 

저는 아래와 같이 사용하기도 합니다

 

var dh = $(window).height();

var dw = $(window).width();

var cw = 1010; // 내가 표시하고자 하는 컨텐츠, 예를 들어 동영상의 폭

var ch = 613;   // 내가 표시하고자 하는 컨텐츠, 예를 들어 동영상의 넓이

var per = dw/cw; // 내가 표시하고자 하는 컨텐츠의 현재 윈도우 대비 비율

var per2 =dh/ch;

if(per > per2 ){

    per = per2;

}

var gapH = ( dh - (ch*per) )/2;

var gapW = ( dw - (cw*per) )/2

 

$('body').css('margin-top', gapH ); // 세로방향의 중앙에 위치하게 할때 사용합니다. 

$('body').css('margin-left', gapW );

 

$('meta[name=viewport]').attr('content','"width=device-width, initial-scale='+per+', maximum-scale=2.0, user-scalable=yes"');

 

 

 

 

아래 사이트를 참고했습니다

 

https://blog.naver.com/magix77/221276063757

모바일 페이지 작성 시 viewport initial-scale 적용 방법