JS Screen ऑब्जेक्ट

Screen Object क्या है?

window.screen user के physical display device के बारे में जानकारी देता है, इससे independent कि browser window फिलहाल कितनी बड़ी है। यह hardware/display facts का एक read-only source है, कोई ऐसी चीज़ नहीं जिसे आप configure करें।

उदाहरण: What Is the Screen Object?

console.log(screen.width, screen.height); // physical display resolution

Screen Size Properties

screen.width और screen.height display का पूरा resolution pixels में बताते हैं, जबकि screen.availWidth और screen.availHeight taskbar या dock जैसे OS elements द्वारा ली गई जगह घटा देते हैं।

available values आमतौर पर layout decisions के लिए ज़्यादा उपयोगी होती हैं।

उदाहरण: Screen Size Properties

console.log(screen.width, screen.height); // full resolution
console.log(screen.availWidth, screen.availHeight); // minus OS taskbar/dock

Color और Pixel Depth

screen.colorDepth और screen.pixelDepth बताते हैं कि प्रति pixel रंग represent करने के लिए कितने bits इस्तेमाल होते हैं, modern hardware पर लगभग हमेशा 24 या 30।

यह आज शायद ही कभी इस्तेमाल होता है पर specialized graphics या display capability जांचने वाली accessibility tooling के लिए मायने रखता है।

उदाहरण: Color and Pixel Depth

console.log(screen.colorDepth, screen.pixelDepth);

Screen बनाम Window Dimensions

यह एक आम गलती है: screen.width monitor का कुल resolution है, जबकि window.innerWidth browser viewport size है, जो लगभग हमेशा छोटा होता है।

दोनों को मिला देना ऐसा layout code देता है जो maximized window पर सही व्यवहार करता है पर user के resize करते ही टूट जाता है।

उदाहरण: Screen vs Window Dimensions

console.log("Screen:", screen.width, "x", screen.height); // monitor resolution
console.log("Window:", window.innerWidth, "x", window.innerHeight); // browser viewport, usually smaller

Practical Uses

Screen properties मुख्यतः ऐसे adaptive experiences के लिए इस्तेमाल होती हैं जो physical display की परवाह करते हैं, जैसे किसी high colorDepth screen के लिए एक higher-resolution image set चुनना, available screen space के relative एक popup size खोलना, या visitor display sizes के बारे में basic analytics।

उदाहरण: Practical Uses

// Check whether `screen.colorDepth >= 24`
// Check whether `screen.colorDepth >= 24`
if (screen.colorDepth >= 24) {
  // Print "Load high-resolution images" to the console
  // Print "Load high-resolution images" to the console
  console.log("Load high-resolution images");
// Otherwise, run this branch
// Otherwise, run this branch
} else {
  // Print "Load standard images" to the console
  // Print "Load standard images" to the console
  console.log("Load standard images");
}