001002003004005006007008009010011012013014015016017018019020021022023024025026027028029030031032033034035036037038039040041042043044
// (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 += ' '+'(desktop : 툴바,스크롤바 등을 제외한 웹브라우저 폭, mobile : layout viewport)<br>'; resultText += 'document.documentElement.offsetWidth : '+documentWidth+'<br>'; resultText += 'window.innerWidth : '+vpInnerWidth+'<br>'; resultText += ' '+'(desktop : 툴바,스크롤바 등을 제외한 웹브라우저 폭; mobile : visual viewport)<br>'; resultText += 'window.outerWidth : '+vpOuterWidth+'<br>'; resultText += ' '+'(툴바,스크롤바 등을 포함한 웹브라우저 폭)<br>'; resultText += 'window.screen.width : '+screenWidth+'<br>'; resultText += ' '+'(장치 스크린 사이즈)<br>'; out.innerHTML = resultText; } }