Palances Liao
Thomas Steiner
আধুনিক উপায়
window.getScreenDetails() ব্যবহার করে
আপনার ব্রাউজার getScreenDetails() পদ্ধতি সমর্থন করে তা নিশ্চিত করতে, প্রথমে এটি window অবজেক্টে বিদ্যমান কিনা তা পরীক্ষা করুন। তারপর, সংযুক্ত স্ক্রিন পেতে window.getScreenDetails() এ কল করুন। পরিবর্তিত স্ক্রিনের বিবরণের সাথে খাপ খাইয়ে নিতে একটি ইভেন্ট শ্রোতা যোগ করা আপনাকে আপনার অ্যাপের প্রয়োজন অনুযায়ী একাধিক স্ক্রীন পরিচালনা করতে দেয়।
if ('getScreenDetails' in window) {
// The Window Management API is supported.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
// Handle screens change.
});
}
ক্লাসিক উপায়
window.screen পদ্ধতি ব্যবহার করে
মাল্টি-স্ক্রিন লেআউট নিয়ন্ত্রণ করার কোনো ক্লাসিক উপায় নেই, তবে আপনি window.screen প্রপার্টি ব্যবহার করে বর্তমান স্ক্রীন নিয়ন্ত্রণে ফিরে আসতে পারেন এবং নতুন API আকৃতি পলিফিল করতে পারেন।
if (!('getScreenDetails' in window)) {
// Returning a one-element array with the current screen,
// noting that there might be more.
window.getScreenDetails = async () => [window.screen];
// Set to `false`, noting that this might be a lie.
window.screen.isExtended = false;
}
প্রগতিশীল বর্ধিতকরণ
নীচের ডেমো দেখায় কিভাবে আপনি উইন্ডো ম্যানেজমেন্ট API দিয়ে একাধিক স্ক্রীন পরিচালনা করতে পারেন। কোডটি প্রথমে ব্রাউজারের ক্ষমতা পরীক্ষা করে এবং তারপর ক্লাসিক উপায়ে ফিরে আসে।
const detectButton = document.querySelector('#detectScreen');
const createButton = document.querySelector('#create');
const permissionLabel = document.querySelector('#permissionStatus');
const screensAvailLabel = document.querySelector('#screensAvail');
const popupUrl = './popup.html';
let screenDetails = undefined;
let permission = undefined;
let currentScreenLength = undefined;
detectButton.addEventListener('click', async () => {
if ('getScreenDetails' in window) {
screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
if (screenDetails.screens.length !== currentScreenLength) {
currentScreenLength = screenDetails.screens.length;
updateScreenInfo();
}
});
try {
permission =
(await navigator.permissions.query({ name: 'window-management' })).state === 'granted'
? 'Granted'
: 'No Permission';
} catch (err) {
console.error(err);
}
currentScreenLength = screenDetails.screens.length;
updateScreenInfo();
} else {
screenDetails = window.screen;
permission = 'Window Management API - NOT SUPPORTED';
currentScreenLength = 1;
updateScreenInfo();
}
});
createButton.addEventListener('click', () => {
let screen = screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
options = {
x: screen.availLeft,
y: screen.availTop,
width: screen.availWidth,
height: screen.availHeight,
};
window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
});
function getFeaturesFromOptions(options) {
return (
'left=' +
options.x +
',top=' +
options.y +
',width=' +
options.width +
',height=' +
options.height
);
}
updateScreenInfo = () => {
screensAvailLabel.innerHTML = currentScreenLength;
permissionLabel.innerHTML = permission;
if ('getScreenDetails' in window && screenDetails.screens.length >= 1) {
createButton.disabled = false;
} else {
createButton.disabled = true;
}
};
আরও পড়া
ডেমো
এইচটিএমএল
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎉</text></svg>"
/>
<title>How to use multiple screens</title>
<link rel="stylesheet" href="/style.css" />
<!-- TODO: Devsite - Removed inline handlers -->
<!-- <script src="/script.js" type="module"></script> -->
</head>
<body>
<h1>How to use multiple screens</h1>
<div>
<div>
Permission Status:
<span id="permissionStatus"></span>
</div>
<div>Screens Available: <span id="screensAvail"></span></div>
</div>
<button id="detectScreen">Detect Screens</button>
<button id="create" disabled>Create Page On Random Screen</button>
</body>
</html>সিএসএস
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
জেএস
const detectButton = document.querySelector('#detectScreen');
const createButton = document.querySelector('#create');
const permissionLabel = document.querySelector('#permissionStatus');
const screensAvailLabel = document.querySelector('#screensAvail');
const popupUrl = 'supporting-popup.html';
let screenDetails = undefined;
let permission = undefined;
let currentScreenLength = undefined;
detectButton.addEventListener('click', async () => {
if ('getScreenDetails' in window) {
screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
if (screenDetails.screens.length !== currentScreenLength) {
currentScreenLength = screenDetails.screens.length;
updateScreenInfo();
}
});
try {
permission =
(await navigator.permissions.query({ name: 'window-placement' }))
.state === 'granted'
? 'Granted'
: 'No Permission';
} catch (err) {
console.error(err);
}
currentScreenLength = screenDetails.screens.length;
updateScreenInfo();
} else {
screenDetails = window.screen;
permission = 'Multi-Screen Window Placement API - NOT SUPPORTED';
currentScreenLength = 1;
updateScreenInfo();
}
});
createButton.addEventListener('click', () => {
const screen =
screenDetails.screens[Math.floor(Math.random() * currentScreenLength)];
const options = {
x: screen.availLeft,
y: screen.availTop,
width: screen.availWidth,
height: screen.availHeight,
};
window.open(popupUrl, '_blank', getFeaturesFromOptions(options));
});
const getFeaturesFromOptions = (options) => {
return (
'left=' +
options.x +
',top=' +
options.y +
',width=' +
options.width +
',height=' +
options.height
);
};
const updateScreenInfo = () => {
screensAvailLabel.innerHTML = currentScreenLength;
permissionLabel.innerHTML = permission;
if ('getScreenDetails' in window && screenDetails.screens.length > 1) {
createButton.disabled = false;
} else {
createButton.disabled = true;
}
};