001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
026
027
028
029
030
031
032
033
034
035
036
037
038
039
040
041
042
043
044

// (2021.1.12, 차재복, Cha Jae Bok, http://www.ktword.co.kr)

// mobile/desktop 구분 및 화면 크기 테스트
function isMobileOrDesktop() {

    let out = document.getElementById('mobile_desktop');
        out.style.display = 'block';

    if(out.hasChildNodes()) {
        out.innerHTML ='';
        out.style.display = 'none';
    } else {
        let resultText = '';

        let ratio = window.devicePixelRatio;
        if(ratio >= 1.5){ 
            resultText += 'window.devicePixelRatio='+ratio+', 1.5 이상이므로 mobile로 간주함!<br><br>';
        } else {
            resultText += 'window.devicePixelRatio='+ratio+', 1.5 보다 작으므로 desktop으로 간주함!<br><br>';
        }
    
        let vpDocumentWidth = document.documentElement.clientWidth;     // 문서의 viewport 폭
        let documentWidth = document.documentElement.offsetWidth;       // 문서의 폭
            // document.documentElement : mobile인 경우, layout viewport
        let vpInnerWidth = window.innerWidth;                           // 브라우저의 viewport 폭 (스크롤 포함)
        let vpOuterWidth = window.outerWidth;                           // 브라우저의 viewport 폭 (스크롤 미포함)
            // window.innerWidth,window.outerWidth : mobile인 경우, visual viewport 
        let screenWidth = window.screen.width;                          // 화면(스크린) 사이즈

        resultText += 'document.documentElement.clientWidth : '+vpDocumentWidth+'<br>';
            resultText += '&nbsp;&nbsp;&nbsp;'+'(desktop : 툴바,스크롤바 등을 제외한 웹브라우저 폭, mobile : layout viewport)<br>';
        resultText += 'document.documentElement.offsetWidth : '+documentWidth+'<br>';
        resultText += 'window.innerWidth : '+vpInnerWidth+'<br>';
            resultText += '&nbsp;&nbsp;&nbsp;'+'(desktop : 툴바,스크롤바 등을 제외한 웹브라우저 폭; mobile : visual viewport)<br>';
        resultText += 'window.outerWidth : '+vpOuterWidth+'<br>';
            resultText += '&nbsp;&nbsp;&nbsp;'+'(툴바,스크롤바 등을 포함한 웹브라우저 폭)<br>';
        resultText += 'window.screen.width : '+screenWidth+'<br>';
            resultText += '&nbsp;&nbsp;&nbsp;'+'(장치 스크린 사이즈)<br>';

        out.innerHTML = resultText;
    }
}