Palances Liao
Thomas Steiner
Il modo moderno
In uso: window.getScreenDetails()
Per assicurarti che il tuo browser supporti il metodo getScreenDetails(), verifica innanzitutto se esiste nell'oggetto window. Dopodiché chiama il numero window.getScreenDetails() per aggiungere le schermate. L'aggiunta di un listener di eventi per adattarsi ai dettagli dello schermo modificati ti consente di gestire più schermate in base alle esigenze della tua app.
if ('getScreenDetails' in window) {
// The Window Management API is supported.
const screenDetails = await window.getScreenDetails();
screenDetails.addEventListener('screenschange', (event) => {
// Handle screens change.
});
}
Il modo classico
Utilizzo del metodo window.screen
Non esiste un modo classico per controllare i layout multischermo, ma puoi tornare a controllare la schermata corrente utilizzando la proprietà window.screen e il polyfill della nuova forma dell'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;
}
Miglioramento progressivo
La demo seguente mostra come gestire più schermi con l'API Window Management. Il codice verifica prima le funzionalità del browser, poi torna al metodo classico.
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;
}
};
Per approfondire
Demo
HTML
<!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>CSS
:root {
color-scheme: dark light;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
JS
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;
}
};