[Window_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>

 

결과보기