• Q&A
  • 회원가입
  • 로그인

[Screen] JS - screen.width 속성 ★ - 스크린너비 (= 화면너비 = screen.width속성 = 스크린위드스속성) ※ 작업표시줄 포함

목차
  1. screen.width 예제 - 스크린 너비 반환
  2. screen.width 정의
  3. screen.width 구문
  4. screen.width 예제 - 사용자 스크린 정보

 

screen.width 예제 - 스크린 너비 반환 

 

<button onclick="homzzang()">클릭</button>


<p id="demo"></p>


<script>

function homzzang() {

  var x = "전체 width : " + screen.width + "px";

  document.getElementById("demo").innerHTML = x;

}

</script>

 

결과보기

 

screen.width 정의

 

스크린(=화면) 너비 반환.

 


 

1.

  • Windows 작업표시줄과 같은 인터페이스도 포함.
  • px (픽셀) 단위로 반환
  • 읽기 전용 속성에 해당. (즉, 설정은 불가)

 

2. cf.

screen.height 속성 - Windows 작업표시줄 포함한 화면의 전체 높이


3.
모든 브라우저 지원

 

4. MDN screen.width 예제 보기

https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

 

 

screen.width 구문

 

screen.width

 


[반환값]

 

화면 전체 너비를 px 단위로 반환.

 

 

screen.width 예제 - 사용자 스크린 정보

 

<h3>당신의 Screen 정보 (홈짱닷컴 Homzzang.com 제공)</h3>

<div id="demo"></div>


<script>

var txt = "";

txt += "<p>전체 width: " + screen.width + "</p>";

txt += "<p>전체 height: " + screen.height + "</p>";

txt += "<p>availWidth (= 작업표시줄 제외 너비): " + screen.availWidth + "</p>";

txt += "<p>availHeight (= 작업표시줄 제외 높이): " + screen.availHeight + "</p>";

txt += "<p>colorDepth (Color depth) : " + screen.colorDepth + "</p>";

txt += "<p>pixelDepth (Color resolution) : " + screen.pixelDepth + "</p>";


document.getElementById("demo").innerHTML = txt;

</script>

 

결과보기


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012