JS) Mobile viewport size fit

To support various device viewport size specially mobile device has portrait and landscape, scale up and down, website have to adjust various enviorment

 

js Code - it is widely used

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();
}

※ Specific div scale in html doc is adjusted. When loading and changing window, calling it and adjust window size.

 

More easy way.
1. wrap is specifit div width
2. toFixed function change number to string.

Calculate div ratio contrast with screen and adjust this ratio.

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]') is code to access to meta tage viewport.
Normally viewport is on the top page. If bottom is reset, last setting viewport is adjusted.

 

https://doolyit.tistory.com/151

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