Modern yöntem
window.getScreenDetails()
kullanılıyor
Tarayıcınızın getScreenDetails()
yöntemini desteklediğinden emin olmak için öncelikle window
nesnesinde bu yöntemin mevcut olup olmadığını kontrol edin. Ardından, ekranları eklemek için window.getScreenDetails()
numaralı telefonu arayın. Değiştirilen ekran ayrıntılarına uyum sağlayacak bir etkinlik işleyici eklemek, birden fazla ekranı uygulamanızın ihtiyaçlarına göre yönetmenize olanak tanır.
if ('getScreenDetails' in window) {
// The Window Management API is supported.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
// Handle screens change.
});
}
Klasik yöntem
window.screen yöntemini kullanma
Birden çok ekran düzenini kontrol etmenin klasik bir yolu yoktur ancak window.screen
özelliğini kullanarak ve yeni API şeklini çoklu doldurarak geçerli ekranı kontrol etmeye geri dönebilirsiniz.
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;
}
Progresif geliştirme
Aşağıdaki demoda, Window Management API ile birden fazla ekranı nasıl yönetebileceğiniz gösterilmektedir. Kod, önce tarayıcı yeteneğini kontrol eder ve ardından klasik yönteme geri döner.
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;
}
};
Daha fazla bilgi
Demografi
<!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;
}
};