Como usar várias telas

Palances Liao
Palances Liao
Thomas Steiner

A maneira moderna

Como usar window.getScreenDetails()

Para garantir que seu navegador seja compatível com o método getScreenDetails(), primeiro verifique se ele existe no objeto window. Em seguida, chame window.getScreenDetails() para receber as telas anexadas. Adicionar um listener de eventos para se adaptar aos detalhes da tela alterados permite gerenciar várias telas de acordo com as necessidades do seu app.

if ('getScreenDetails' in window) {
  // The Window Management API is supported.
  const screenDetails = await window.getScreenDetails();
  screenDetails.addEventListener('screenschange', (event) => {
    // Handle screens change.
  });
}

Browser Support

  • Chrome: 100.
  • Edge: 100.
  • Firefox: not supported.
  • Safari: not supported.

Source

A maneira clássica

Como usar o método window.screen

Não há uma maneira clássica de controlar layouts de várias telas, mas você pode voltar a controlar a tela atual usando a propriedade window.screen e o polyfill do novo formato de 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;
}

Browser Support

  • Chrome: 1.
  • Edge: 12.
  • Firefox: 1.
  • Safari: 1.

Source

Aprimoramento progressivo

A demonstração abaixo mostra como processar várias telas com a API Window Management. O código verifica a capacidade do navegador primeiro e, em seguida, volta à maneira clássica.

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;
  }
};

Leitura adicional

Demonstração

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;
  }
};