{"id":81778,"date":"2022-09-19T22:47:06","date_gmt":"2022-09-19T20:47:06","guid":{"rendered":"https:\/\/rmarketingdigital.com\/development\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/"},"modified":"2020-09-16T15:06:51","modified_gmt":"2020-09-16T18:06:51","slug":"administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla","status":"publish","type":"post","link":"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/","title":{"rendered":"Manage Multiple Displays with the Multi-Screen Window Location API"},"content":{"rendered":"<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Contenidos<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Casos-de-uso-sugeridos\" >Casos de uso sugeridos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Estado-actual\" >Estado actual<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Como-utilizar-la-API-de-ubicacion-de-ventanas-multipantalla\" >C\u00f3mo utilizar la API de ubicaci\u00f3n de ventanas multipantalla<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Habilitacion-a-traves-de-chrome-flags\" >Habilitaci\u00f3n a trav\u00e9s de chrome: \/\/ flags<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Habilitar-el-apoyo-durante-la-fase-de-prueba-de-origen\" >Habilitar el apoyo durante la fase de prueba de origen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Registrese-para-la-prueba-de-origen\" >Reg\u00edstrese para la prueba de origen<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#El-problema\" >El problema<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Deteccion-de-caracteristicas\" >Detecci\u00f3n de caracter\u00edsticas<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#los-window-placement-permiso\" >los window-placement permiso<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#los-isMultiScreen-metodo\" >los isMultiScreen() m\u00e9todo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#los-getScreens-metodo\" >los getScreens() m\u00e9todo<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#los-screenschange-evento\" >los screenschange evento<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Nuevas-opciones-de-pantalla-completa\" >Nuevas opciones de pantalla completa<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Polyfill\" >Polyfill<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Manifestacion\" >Manifestaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Seguridad-y-permisos\" >Seguridad y permisos<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-17\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Control-de-usuario\" >Control de usuario<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-18\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Transparencia\" >Transparencia<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-19\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Persistencia-de-permisos\" >Persistencia de permisos<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-20\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Realimentacion\" >Realimentaci\u00f3n<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-21\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Cuentanos-sobre-el-diseno-de-la-API\" >Cu\u00e9ntanos sobre el dise\u00f1o de la API<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-22\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Informar-un-problema-con-la-implementacion\" >Informar un problema con la implementaci\u00f3n<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-23\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Mostrar-apoyo-a-la-API\" >Mostrar apoyo a la API<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-24\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Enlaces-Utiles\" >Enlaces \u00datiles<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-25\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Quiero-ir-mas-profundo\" >Quiero ir mas profundo<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-26\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/administrar-varias-pantallas-con-la-api-de-ubicacion-de-ventanas-multipantalla\/#Agradecimientos\" >Agradecimientos<\/a><\/li><\/ul><\/nav><\/div>\n<p><\/p>\n<div>\n<header class=\"w-article-header\">\n<p class=\"w-article-header__subhead w-mb--non\">\n<p>          Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas.\n        <\/p>\n<p>\n          <time>14 de septiembre de 2020<\/time><br \/>\n            Actualizado <time>14 de septiembre de 2020<\/time>\n        <\/p>\n<\/header>\n<div class=\"w-aside w-aside--note\">\n<p>La API de ubicaci\u00f3n de ventanas multipantalla es parte del proyecto de capacidades y est\u00e1 actualmente en desarrollo.  Esta publicaci\u00f3n se actualizar\u00e1 a medida que avance la implementaci\u00f3n.<\/p>\n<\/div>\n<p>La API de ubicaci\u00f3n de ventanas multipantalla le permite enumerar las pantallas conectadas a su m\u00e1quina y colocar ventanas en pantallas espec\u00edficas.<\/p>\n<h3 id=\"use-cases\"><span class=\"ez-toc-section\" id=\"Casos-de-uso-sugeridos\"><\/span>Casos de uso sugeridos <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ejemplos de sitios que pueden usar esta API incluyen:<\/p>\n<ul>\n<li>Editores gr\u00e1ficos de ventanas m\u00faltiples a la<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.gimp.org\/release-notes\/gimp-2.8.html#single-window-mode\">Ca\u00f1utillo<\/a> Puede colocar varias herramientas de edici\u00f3n en ventanas colocadas con precisi\u00f3n.<\/li>\n<li>Las mesas de operaciones virtuales pueden mostrar las tendencias del mercado en m\u00faltiples ventanas, cualquiera de las cuales se puede ver en modo de pantalla completa.<\/li>\n<li>Las aplicaciones de presentaci\u00f3n de diapositivas pueden mostrar notas del orador en la pantalla principal interna y la presentaci\u00f3n en un proyector externo.<\/li>\n<\/ul>\n<h2 id=\"status\"><span class=\"ez-toc-section\" id=\"Estado-actual\"><\/span>Estado actual <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<div class=\"w-table-wrapper\">\n<div class=\"w-table-wrapper\">\n<table>\n<thead>\n<tr>\n<th>Paso<\/th>\n<th>Estado<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>1. Crea un explicador<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/webscreens\/window-placement\/blob\/master\/EXPLAINER.md\">Completar<\/a><\/td>\n<\/tr>\n<tr>\n<td>2. Crear borrador inicial de especificaci\u00f3n<\/td>\n<td><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webscreens.github.io\/window-placement\/\">Completar<\/a><\/td>\n<\/tr>\n<tr>\n<td>3. Recopile comentarios y repita el dise\u00f1o<\/td>\n<td>En progreso<\/td>\n<\/tr>\n<tr>\n<td><strong>4. Prueba de origen<\/strong><\/td>\n<td><strong><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/1411878483180650497\">En progreso<\/a><\/strong><\/td>\n<\/tr>\n<tr>\n<td>5. Lanzamiento<\/td>\n<td>No empezado<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n<h2 id=\"use\"><span class=\"ez-toc-section\" id=\"Como-utilizar-la-API-de-ubicacion-de-ventanas-multipantalla\"><\/span>C\u00f3mo utilizar la API de ubicaci\u00f3n de ventanas multipantalla <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"enabling-via-chrome:flags\"><span class=\"ez-toc-section\" id=\"Habilitacion-a-traves-de-chrome-flags\"><\/span>Habilitaci\u00f3n a trav\u00e9s de chrome: \/\/ flags <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para experimentar con la API de ubicaci\u00f3n de ventanas multipantalla localmente, sin un token de prueba de origen, habilite la <code>#enable-experimental-web-platform-features<\/code> bandera en <code>chrome:\/\/flags<\/code>.<\/p>\n<h3 id=\"enabling-support-during-the-origin-trial-phase\"><span class=\"ez-toc-section\" id=\"Habilitar-el-apoyo-durante-la-fase-de-prueba-de-origen\"><\/span>Habilitar el apoyo durante la fase de prueba de origen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>A partir de Chrome 86, la API de ubicaci\u00f3n de ventanas multipantalla estar\u00e1 disponible como prueba de origen en Chrome.  Se espera que la prueba de origen finalice en Chrome 88 (24 de febrero de 2021).<\/p>\n<p>Las pruebas de Origin le permiten probar nuevas funciones y brindar comentarios sobre su usabilidad, practicidad y efectividad a la comunidad de est\u00e1ndares web.  Para obtener m\u00e1s informaci\u00f3n, consulte el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/GoogleChrome\/OriginTrials\/blob\/gh-pages\/developer-guide.md\">Gu\u00eda de pruebas de Origin para desarrolladores web<\/a>.  Para inscribirse en esta u otra prueba de origen, visite el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/trials\/active\">p\u00e1gina de registro<\/a>.<\/p>\n<h3 id=\"register-for-ot\"><span class=\"ez-toc-section\" id=\"Registrese-para-la-prueba-de-origen\"><\/span>Reg\u00edstrese para la prueba de origen <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<ol>\n<li><a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developers.chrome.com\/origintrials\/#\/view_trial\/1411878483180650497\">Solicita un token<\/a> por tu origen.<\/li>\n<li>Agrega el token a tus p\u00e1ginas.  Hay dos maneras de hacerlo:\n<ul>\n<li>Agregar un <code>origin-trial<\/code> <code>&lt;meta&gt;<\/code>  etiqueta al encabezado de cada p\u00e1gina.  Por ejemplo, esto puede verse as\u00ed: <br \/><code>&lt;meta http-equiv=\"origin-trial\" content=\"TOKEN_GOES_HERE\"&gt;<\/code><\/li>\n<li>Si puede configurar su servidor, tambi\u00e9n puede agregar el token usando un <code>Origin-Trial<\/code> Encabezado HTTP.  El encabezado de respuesta resultante deber\u00eda verse as\u00ed:<br \/><code>Origin-Trial: TOKEN_GOES_HERE<\/code><\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<h3 id=\"the-problem\"><span class=\"ez-toc-section\" id=\"El-problema\"><\/span>El problema <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El enfoque probado en el tiempo para controlar las ventanas,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/open\"><code>Window.open()<\/code><\/a>, desafortunadamente desconoce las pantallas adicionales.  Si bien algunos aspectos de esta API parecen un poco arcaicos, como su<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/open#Parameters:~:text=title.-,windowFeatures\"><code>windowFeatures<\/code><\/a><br \/>\n<code>DOMString<\/code>  par\u00e1metro, sin embargo, nos ha servido bien a lo largo de los a\u00f1os.  Para especificar una ventana<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/open#Position\">posici\u00f3n<\/a>, puede pasar las coordenadas como <code>left<\/code> y <code>top<\/code> (o <code>screenX<\/code> y <code>screenY<\/code> respectivamente) y pasar el deseado<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/open#Size:~:text=well.-,Size\">Talla<\/a> como<br \/>\n<code>width<\/code> y <code>height<\/code> (o <code>innerWidth<\/code> y <code>innerHeight<\/code> respectivamente).  Por ejemplo, para abrir una ventana de 400 \u00d7 300 a 50 p\u00edxeles de la izquierda y 50 p\u00edxeles de la parte superior, este es el c\u00f3digo que puede utilizar:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">const<\/span> popup <span class=\"token operator\">=<\/span> window<span class=\"token punctuation\">.<\/span><span class=\"token function\">open<\/span><span class=\"token punctuation\">(<\/span><br><span class=\"token string\">\"https:\/\/example.com\/\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">\"My Popup\"<\/span><span class=\"token punctuation\">,<\/span><br><span class=\"token string\">\"left=50,top=50,width=400,height=300\"<\/span><br><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Puede obtener informaci\u00f3n sobre la pantalla actual mirando el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Window\/screen\"><code>window.screen<\/code><\/a>  propiedad, que devuelve un <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Screen\"><code>Screen<\/code><\/a>  objeto.  Esta es la salida en mi MacBook Air 13 \u2033:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">window<span class=\"token punctuation\">.<\/span>screen<span class=\"token punctuation\">;<\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Como la mayor\u00eda de las personas que trabajan en tecnolog\u00eda, he tenido que adaptarme a la nueva realidad laboral y montar mi propia oficina en casa.  El m\u00edo se ve como en la foto de abajo (si est\u00e1 interesado, puede leer el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/blog.tomayac.com\/2020\/03\/23\/my-working-from-home-setup-during-covid-19\/\">detalles completos sobre mi configuraci\u00f3n<\/a>).  El iPad al lado de mi MacBook Air est\u00e1 conectado a la computadora port\u00e1til a trav\u00e9s de<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/support.apple.com\/en-us\/HT210380\">Sidecar<\/a>, as\u00ed que cuando lo necesito, puedo convertir r\u00e1pidamente el iPad en una segunda pantalla.<\/p>\n<figure class=\"w-figure\">\n  <img alt='desk-8653333' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/desk-8653333.jpg' alt=\"Banco escolar sobre dos sillas.  En la parte superior del banco de la escuela hay cajas de zapatos que sostienen una computadora port\u00e1til y dos iPads a su alrededor.\"><figcaption class=\"w-figcaption\">Una configuraci\u00f3n de m\u00faltiples pantallas.<\/figcaption><\/figure>\n<p>Si quiero aprovechar la pantalla m\u00e1s grande, puedo colocar la ventana emergente del ejemplo de c\u00f3digo anterior en la segunda pantalla.  Lo hago as\u00ed:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">popup<span class=\"token punctuation\">.<\/span><span class=\"token function\">moveTo<\/span><span class=\"token punctuation\">(<\/span><span class=\"token number\">2500<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token number\">50<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Esta es una suposici\u00f3n aproximada, ya que no hay forma de conocer las dimensiones de la segunda pantalla.  La informaci\u00f3n de <code>window.screen<\/code> solo cubre la pantalla incorporada, pero no la pantalla del iPad.  El reportado <code>width<\/code> de la pantalla incorporada fue <code>1680<\/code> p\u00edxeles, as\u00ed que movi\u00e9ndonos a<br \/>\n<code>2500<\/code> p\u00edxeles <em>podr\u00eda<\/em> trabajar para cambiar la ventana al iPad, ya que <em>yo<\/em> Sucede que s\u00e9 que se encuentra a la derecha de mi MacBook Air.  \u00bfC\u00f3mo puedo hacer esto en el caso general?  Resulta que hay una forma mejor que adivinar.  De esa forma es la API de ubicaci\u00f3n de ventanas multipantalla.<\/p>\n<h3 id=\"feature-detection\"><span class=\"ez-toc-section\" id=\"Deteccion-de-caracteristicas\"><\/span>Detecci\u00f3n de caracter\u00edsticas <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para comprobar si la API de ubicaci\u00f3n de ventanas multipantalla es compatible, utilice:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token string\">\"getScreens\"<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"the-window-placement-permission\"><span class=\"ez-toc-section\" id=\"los-window-placement-permiso\"><\/span>los <code>window-placement<\/code> permiso <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Antes de poder utilizar la API de ubicaci\u00f3n de ventanas multipantalla, debo pedir permiso al usuario para hacerlo.  El nuevo <code>window-placement<\/code> El permiso se puede consultar con el<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Permissions_API\">API de permisos<\/a> al igual que:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">let<\/span> granted <span class=\"token operator\">=<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> <span class=\"token punctuation\">{<\/span> state <span class=\"token punctuation\">}<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> navigator<span class=\"token punctuation\">.<\/span>permissions<span class=\"token punctuation\">.<\/span><span class=\"token function\">query<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> name<span class=\"token operator\">:<\/span> <span class=\"token string\">\"window-placement\"<\/span> <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br>granted <span class=\"token operator\">=<\/span> state <span class=\"token operator\">===<\/span> <span class=\"token string\">\"granted\"<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>El navegador<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/webscreens.github.io\/window-placement\/#issue-c601b517:~:text=Permission%20check%20for%20above%3F,-partial\">lata<\/a><br \/>\nelija mostrar la solicitud de permiso de forma din\u00e1mica en el primer intento de utilizar cualquiera de los m\u00e9todos de la nueva API.  Siga leyendo para obtener m\u00e1s informaci\u00f3n.<\/p>\n<h3 id=\"the-ismultiscreen()-method\"><span class=\"ez-toc-section\" id=\"los-isMultiScreen-metodo\"><\/span>los <code>isMultiScreen()<\/code> m\u00e9todo <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Para utilizar la API de ubicaci\u00f3n de ventanas multipantalla, primero llamar\u00e9 al<br \/>\n<code>Window.isMultiScreen()<\/code> m\u00e9todo.  Devuelve una promesa que se resuelve con <code>true<\/code> o <code>false<\/code>, dependiendo de si hay una o varias pantallas conectadas actualmente a la m\u00e1quina.  Para mi configuraci\u00f3n, vuelve <code>true<\/code>.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">await<\/span> window<span class=\"token punctuation\">.<\/span><span class=\"token function\">isMultiScreen<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"the-getscreens()-method\"><span class=\"ez-toc-section\" id=\"los-getScreens-metodo\"><\/span>los <code>getScreens()<\/code> m\u00e9todo <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Ahora que s\u00e9 que la configuraci\u00f3n actual es multipantalla, puedo obtener m\u00e1s informaci\u00f3n sobre la segunda pantalla usando <code>Window.getScreens()<\/code>.  Devuelve una promesa que se resuelve con una matriz de <code>Screen<\/code> objetos.  En mi MacBook Air 13 con un iPad conectado, esto devuelve una matriz de dos <code>Screen<\/code> objetos:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">await<\/span> window<span class=\"token punctuation\">.<\/span><span class=\"token function\">getScreens<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Observe c\u00f3mo el valor de <code>left<\/code> para el iPad comienza en <code>1680<\/code>, que es exactamente el <code>width<\/code> de la pantalla incorporada.  Esto me permite determinar exactamente c\u00f3mo est\u00e1n dispuestas l\u00f3gicamente las pantallas (una al lado de la otra, una encima de la otra, etc.).  Tambi\u00e9n hay datos ahora para cada pantalla para mostrar si es un <code>internal<\/code> uno y si es un <code>primary<\/code> uno.  Tenga en cuenta que la pantalla incorporada<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/osxdaily.com\/2010\/04\/27\/set-the-primary-display-mac\/#:~:text=Click%20on%20the%20Display%20icon,primary%20display%20for%20your%20Mac\">no es necesariamente la pantalla principal<\/a>.  Ambos tambi\u00e9n tienen <code>id<\/code>, que, si persiste en las sesiones del navegador, permite restaurar la distribuci\u00f3n de las ventanas.<\/p>\n<h3 id=\"the-screenschange-event\"><span class=\"ez-toc-section\" id=\"los-screenschange-evento\"><\/span>los <code>screenschange<\/code> evento <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Lo \u00fanico que falta ahora es una forma de detectar cu\u00e1ndo cambia la configuraci\u00f3n de mi pantalla.  Un nuevo evento<br \/>\n<code>screenschange<\/code>, hace exactamente eso: dispara cada vez que se modifica la constelaci\u00f3n de la pantalla.  (Tenga en cuenta que \u00abpantallas\u00bb est\u00e1 en plural en el nombre del evento). Tambi\u00e9n se activa cuando cambia la resoluci\u00f3n de una de las pantallas conectadas o cuando una pantalla nueva o existente est\u00e1 (f\u00edsica o virtualmente en el caso de Sidecar) conectada o desconectada .<\/p>\n<p>Tenga en cuenta que debe buscar los detalles de la nueva pantalla de forma asincr\u00f3nica, <code>screenschange<\/code> El evento en s\u00ed no proporciona estos datos.  Esto puede <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/webscreens\/window-placement\/issues\/28\">cambio en el futuro<\/a>.  Por ahora, puede buscar los detalles de la pantalla llamando <code>window.getScreens()<\/code> Como se muestra abajo.<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\">window<span class=\"token punctuation\">.<\/span><span class=\"token function\">addEventListener<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'screenschange'<\/span><span class=\"token punctuation\">,<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token parameter\">event<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">log<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">'I am there, but mostly useless'<\/span><span class=\"token punctuation\">,<\/span> event<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">const<\/span> details <span class=\"token operator\">=<\/span> <span class=\"token keyword\">await<\/span> window<span class=\"token punctuation\">.<\/span><span class=\"token function\">getScreens<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"new-fullscreen-options\"><span class=\"ez-toc-section\" id=\"Nuevas-opciones-de-pantalla-completa\"><\/span>Nuevas opciones de pantalla completa <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Hasta ahora, pod\u00eda solicitar que los elementos se mostraran en modo de pantalla completa a trav\u00e9s del nombre apropiado<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/Element\/requestFullscreen\"><code>requestFullScreen()<\/code><\/a><\/p>\n<p>m\u00e9todo.  El m\u00e9todo toma un <code>options<\/code> par\u00e1metro donde puedes pasar<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FullscreenOptions\"><code>FullscreenOptions<\/code><\/a>.  Hasta ahora, su \u00fanica propiedad ha sido<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/API\/FullscreenOptions\/navigationUI\"><code>navigationUI<\/code><\/a>.  La API de ubicaci\u00f3n de ventanas multipantalla agrega una nueva <code>screen<\/code> propiedad que le permite determinar en qu\u00e9 pantalla iniciar la vista de pantalla completa.  Por ejemplo, si desea que la pantalla principal sea de pantalla completa:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">try<\/span> <span class=\"token punctuation\">{<\/span><br><span class=\"token keyword\">const<\/span> primaryScreen <span class=\"token operator\">=<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token keyword\">await<\/span> <span class=\"token function\">getScreens<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">.<\/span><span class=\"token function\">filter<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">(<\/span><span class=\"token parameter\">screen<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> screen<span class=\"token punctuation\">.<\/span>primary<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">[<\/span><span class=\"token number\">0<\/span><span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token keyword\">await<\/span> document<span class=\"token punctuation\">.<\/span>body<span class=\"token punctuation\">.<\/span><span class=\"token function\">requestFullscreen<\/span><span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">{<\/span> screen<span class=\"token operator\">:<\/span> primaryScreen <span class=\"token punctuation\">}<\/span><span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span> <span class=\"token keyword\">catch<\/span> <span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>console<span class=\"token punctuation\">.<\/span><span class=\"token function\">error<\/span><span class=\"token punctuation\">(<\/span>err<span class=\"token punctuation\">.<\/span>name<span class=\"token punctuation\">,<\/span> err<span class=\"token punctuation\">.<\/span>message<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<h3 id=\"polyfill\"><span class=\"ez-toc-section\" id=\"Polyfill\"><\/span>Polyfill <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>No es posible rellenar la API de ubicaci\u00f3n de ventanas multipantalla, pero puede ajustar su forma para poder codificar exclusivamente con la nueva API:<\/p>\n<p><web-copy-code><\/p>\n<pre class=\"language-js\"><code class=\"language-js\"><span class=\"token keyword\">if<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token operator\">!<\/span><span class=\"token punctuation\">(<\/span><span class=\"token string\">\"getScreens\"<\/span> <span class=\"token keyword\">in<\/span> window<span class=\"token punctuation\">)<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token punctuation\">{<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">getScreens<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token punctuation\">[<\/span>window<span class=\"token punctuation\">.<\/span>screen<span class=\"token punctuation\">]<\/span><span class=\"token punctuation\">;<\/span><br>window<span class=\"token punctuation\">.<\/span><span class=\"token function-variable function\">isMultiScreen<\/span> <span class=\"token operator\">=<\/span> <span class=\"token keyword\">async<\/span> <span class=\"token punctuation\">(<\/span><span class=\"token punctuation\">)<\/span> <span class=\"token operator\">=&gt;<\/span> <span class=\"token boolean\">false<\/span><span class=\"token punctuation\">;<\/span><br><span class=\"token punctuation\">}<\/span><\/code><\/pre>\n<p><\/web-copy-code><\/p>\n<p>Los otros aspectos de la API: el <code>onscreenschange<\/code> evento y el <code>screen<\/code> propiedad de la<br \/>\n<code>FullscreenOptions<\/code>: Los navegadores no compatibles nunca disparar\u00edan o ignorar\u00edan silenciosamente, respectivamente.<\/p>\n<h2 id=\"demo\"><span class=\"ez-toc-section\" id=\"Manifestacion\"><\/span>Manifestaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Si eres como yo, vigilas de cerca el desarrollo de las distintas criptomonedas.  (En realidad no lo hago, pero, por el bien de este art\u00edculo, supongo que s\u00ed.) Para realizar un seguimiento de las criptomonedas que poseo, he desarrollado una aplicaci\u00f3n web que me permite observar los mercados en toda la vida. situaciones, como desde la comodidad de mi cama, donde tengo una configuraci\u00f3n de pantalla \u00fanica decente.<\/p>\n<figure class=\"w-figure\">\n  <img alt='tv-4772243' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/tv-4772243.jpg' alt=\"Pantalla de televisi\u00f3n masiva al pie de una cama con las piernas del autor parcialmente visibles.  En la pantalla, una mesa de operaciones de criptomonedas falsa. \"><figcaption class=\"w-figcaption\">Relajarse y observar los mercados.<\/figcaption><\/figure>\n<p>Al tratarse de criptograf\u00eda, los mercados pueden volverse agitados en cualquier momento.  Si esto sucediera, puedo moverme r\u00e1pidamente a mi escritorio donde tengo una configuraci\u00f3n de m\u00faltiples pantallas.  Puedo hacer clic en la ventana de cualquier moneda y ver r\u00e1pidamente los detalles completos en una vista de pantalla completa en la pantalla opuesta.  A continuaci\u00f3n se muestra una foto reciente m\u00eda tomada durante la \u00faltima <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.youtube.com\/watch?v=dQw4w9WgXcQ\">Ba\u00f1o de sangre YCY<\/a>.  Me tom\u00f3 completamente desprevenido y me dej\u00f3<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.buzzfeednews.com\/article\/gavon\/brokers-with-hands-on-their-faces\">con mis manos en mi cara<\/a>.<\/p>\n<figure class=\"w-figure\">\n  <img alt='panik-5684572' src='https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/panik-5684572.jpg' alt=\"El autor con las manos en la cara de p\u00e1nico mirando la mesa de operaciones de criptomonedas falsas.\"><figcaption class=\"w-figcaption\">En p\u00e1nico, presenciando el ba\u00f1o de sangre de YCY.<\/figcaption><\/figure>\n<p>Puedes jugar con el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/window-placement.glitch.me\/\">manifestaci\u00f3n<\/a> incrustado a continuaci\u00f3n, o ver su <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/edit\/#!\/window-placement\">c\u00f3digo fuente<\/a> en falla.<\/p>\n<p><!-- Copy and Paste Me --><\/p>\n<p>\n  <iframe src=\"https:\/\/glitch.com\/embed\/#!\/embed\/window-placement?path=iframe.html&amp;previewSize=100\" title=\"window-placement on Glitch\" allow=\"fullscreen; geolocation; microphone; camera; midi; vr; encrypted-media\" style=\"height: 100%; width: 100%; border: 0;\"><br \/>\n  <\/iframe>\n<\/p>\n<h2 id=\"security-and-permissions\"><span class=\"ez-toc-section\" id=\"Seguridad-y-permisos\"><\/span>Seguridad y permisos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Chrome ha dise\u00f1ado e implementado la API de ubicaci\u00f3n de ventanas multipantalla utilizando los principios b\u00e1sicos definidos en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/chromium.googlesource.com\/chromium\/src\/+\/lkgr\/docs\/security\/permissions-for-powerful-web-platform-features.md\">Controlar el acceso a las potentes funciones de la plataforma web<\/a>, incluido el control del usuario, la transparencia y la ergonom\u00eda.  La API de ubicaci\u00f3n de ventanas multipantalla expone nueva informaci\u00f3n sobre las pantallas conectadas a un dispositivo, lo que aumenta la superficie de huellas dactilares de los usuarios, especialmente aquellos con varias pantallas conectadas constantemente a sus dispositivos.  Como mitigaci\u00f3n de este problema de privacidad, las propiedades de la pantalla expuesta se limitan al m\u00ednimo necesario para los casos de uso de ubicaci\u00f3n com\u00fan.  Se requiere permiso de usuario para que los sitios obtengan informaci\u00f3n de m\u00faltiples pantallas y coloquen ventanas en otras pantallas.<\/p>\n<h3 id=\"user-control\"><span class=\"ez-toc-section\" id=\"Control-de-usuario\"><\/span>Control de usuario <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El usuario tiene el control total de la exposici\u00f3n de su configuraci\u00f3n.  Pueden aceptar o rechazar la solicitud de permiso y revocar un permiso otorgado previamente a trav\u00e9s de la funci\u00f3n de informaci\u00f3n del sitio en el navegador.<\/p>\n<h3 id=\"transparency\"><span class=\"ez-toc-section\" id=\"Transparencia\"><\/span>Transparencia <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El hecho de que se haya otorgado el permiso para usar la API de ubicaci\u00f3n de ventanas multipantalla se expone en la informaci\u00f3n del sitio del navegador y tambi\u00e9n se puede consultar a trav\u00e9s de la API de permisos.<\/p>\n<h3 id=\"permission-persistence\"><span class=\"ez-toc-section\" id=\"Persistencia-de-permisos\"><\/span>Persistencia de permisos <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>El navegador conserva las concesiones de permisos.  El permiso se puede revocar a trav\u00e9s de la informaci\u00f3n del sitio del navegador.<\/p>\n<h2 id=\"feedback\"><span class=\"ez-toc-section\" id=\"Realimentacion\"><\/span>Realimentaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>El equipo de Chrome desea conocer sus experiencias con la API de ubicaci\u00f3n de ventanas multipantalla.<\/p>\n<h3 id=\"tell-us-about-the-api-design\"><span class=\"ez-toc-section\" id=\"Cuentanos-sobre-el-diseno-de-la-API\"><\/span>Cu\u00e9ntanos sobre el dise\u00f1o de la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfHay algo en la API que no funciona como esperaba?  \u00bfO faltan m\u00e9todos o propiedades que necesita para implementar su idea?  \u00bfTiene alguna pregunta o comentario sobre el modelo de seguridad?<\/p>\n<ul>\n<li>Presentar un problema de especificaciones en el correspondiente <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/webscreens\/window-placement\/issues\">Repositorio de GitHub<\/a>o agregue sus pensamientos a un problema existente.<\/li>\n<\/ul>\n<h3 id=\"report-a-problem-with-the-implementation\"><span class=\"ez-toc-section\" id=\"Informar-un-problema-con-la-implementacion\"><\/span>Informar un problema con la implementaci\u00f3n <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEncontraste un error con la implementaci\u00f3n de Chrome?  \u00bfO la implementaci\u00f3n es diferente de la especificaci\u00f3n?<\/p>\n<ul>\n<li>Presentar un error en <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/new.crbug.com\">new.crbug.com<\/a>.  Aseg\u00farese de incluir todos los detalles que pueda, instrucciones simples para reproducir e ingrese <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/bugs.chromium.org\/p\/chromium\/issues\/list?q=component:Blink%3EWindowDialog\"><code>Blink&gt;WindowDialog<\/code><\/a>  en el<br \/>\n<strong>Componentes<\/strong> caja. <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/glitch.com\/\">Falla<\/a> funciona muy bien para compartir repros r\u00e1pidos y f\u00e1ciles.<\/li>\n<\/ul>\n<h3 id=\"show-support-for-the-api\"><span class=\"ez-toc-section\" id=\"Mostrar-apoyo-a-la-API\"><\/span>Mostrar apoyo a la API <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>\u00bfEst\u00e1 pensando en utilizar la API de ubicaci\u00f3n de ventanas multipantalla?  Su soporte p\u00fablico ayuda al equipo de Chrome a priorizar funciones y muestra a otros proveedores de navegadores lo importante que es brindarles soporte.<\/p>\n<ul>\n<li>Comparta c\u00f3mo planea usarlo en el <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/discourse.wicg.io\/t\/proposal-supporting-window-placement-on-multi-screen-devices\/3948\">Hilo del discurso de la WICG<\/a><\/li>\n<li>Enviar un tweet a <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/twitter.com\/ChromiumDev\">@Cromodev<\/a> con el <code>#WindowPlacement<\/code> hashtag y h\u00e1ganos saber d\u00f3nde y c\u00f3mo lo est\u00e1 usando.<\/li>\n<li>Solicite a otros proveedores de navegadores que implementen la API.<\/li>\n<\/ul>\n<h2 id=\"helpful\"><span class=\"ez-toc-section\" id=\"Enlaces-Utiles\"><\/span>Enlaces \u00datiles <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3 id=\"deeper-links\"><span class=\"ez-toc-section\" id=\"Quiero-ir-mas-profundo\"><\/span>Quiero ir mas profundo <span class=\"ez-toc-section-end\"><\/span><\/h3>\n<h2 id=\"acknowledgements\"><span class=\"ez-toc-section\" id=\"Agradecimientos\"><\/span>Agradecimientos <span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>La especificaci\u00f3n de la API de ubicaci\u00f3n de ventanas multipantalla fue editada por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/pwnall\">V\u00edctor Costan<\/a> y<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/joshuaseanbell\">Joshua Bell<\/a>.  La API fue implementada por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/www.linkedin.com\/in\/mike-wasserman-9900a079\/\">Mike Wasserman<\/a>.  Este art\u00edculo fue revisado por<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/jpmedley\">Joe Medley<\/a>,<br \/>\n<a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/beaufortfrancois\">Fran\u00e7ois Beaufort<\/a>y <a rel=\"nofollow noopener noreferrer\" target=\"_blank\" href=\"https:\/\/github.com\/kaycebasques\">Kayce vascos<\/a>.  Gracias a Laura Torrent Puig por las fotos.<\/p>\n<p>    <web-feedback additional-questions=\"api\"><\/web-feedback>\n  <\/div>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas. 14 de septiembre de 2020 Actualizado 14 de septiembre de 2020 La API&#8230;<\/p>","protected":false},"author":1,"featured_media":81779,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1356],"tags":[],"class_list":["post-81778","post","type-post","status-publish","format-standard","has-post-thumbnail","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.0 (Yoast SEO v28.2) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla - R Marketing Digital<\/title>\n<meta name=\"description\" content=\"Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas. 14 de septiembre de 2020 Actualizado 14\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rmarketingdigital.com\/en\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla\" \/>\n<meta property=\"og:description\" content=\"Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas. 14 de septiembre de 2020 Actualizado 14\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rmarketingdigital.com\/en\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/\" \/>\n<meta property=\"og:site_name\" content=\"R Marketing Digital\" \/>\n<meta property=\"article:published_time\" content=\"2022-09-19T20:47:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"360\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"R Marketing Digital\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/\"},\"author\":{\"name\":\"R Marketing Digital\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"headline\":\"Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla\",\"datePublished\":\"2022-09-19T20:47:06+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/\"},\"wordCount\":2050,\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8140237.jpg\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/\",\"name\":\"Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla - R Marketing Digital\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8140237.jpg\",\"datePublished\":\"2022-09-19T20:47:06+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\"},\"description\":\"Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas. 14 de septiembre de 2020 Actualizado 14\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/de\\\/dev\\\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8140237.jpg\",\"contentUrl\":\"https:\\\/\\\/rmarketingdigital.com\\\/wp-content\\\/uploads\\\/2020\\\/09\\\/hero-8140237.jpg\",\"width\":1200,\"height\":360,\"caption\":\"hero-8140237-6820509-jpg\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#website\",\"url\":\"https:\\\/\\\/rmarketingdigital.com\\\/\",\"name\":\"R Marketing Digital\",\"description\":\"Agencia SEO | Publicidad redes sociales | Community Management\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rmarketingdigital.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/rmarketingdigital.com\\\/#\\\/schema\\\/person\\\/7c0d9782b2977b840b3740f00c69a73e\",\"name\":\"R Marketing Digital\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g\",\"caption\":\"R Marketing Digital\"}}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Manage multiple screens with the multi-screen window placement API - R Marketing Digital","description":"Get information about the connected displays and the position of the windows in relation to those displays. September 14, 2020 Updated 14","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rmarketingdigital.com\/en\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/","og_locale":"en_US","og_type":"article","og_title":"Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla","og_description":"Obtenga informaci\u00f3n sobre las pantallas conectadas y la posici\u00f3n de las ventanas en relaci\u00f3n con esas pantallas. 14 de septiembre de 2020 Actualizado 14","og_url":"https:\/\/rmarketingdigital.com\/en\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/","og_site_name":"R Marketing Digital","article_published_time":"2022-09-19T20:47:06+00:00","og_image":[{"width":1200,"height":360,"url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg","type":"image\/jpeg"}],"author":"R Marketing Digital","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/#article","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/"},"author":{"name":"R Marketing Digital","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"headline":"Administrar varias pantallas con la API de ubicaci\u00f3n de ventanas multipantalla","datePublished":"2022-09-19T20:47:06+00:00","mainEntityOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/"},"wordCount":2050,"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg","articleSection":["Dev"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/","url":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/","name":"Manage multiple screens with the multi-screen window placement API - R Marketing Digital","isPartOf":{"@id":"https:\/\/rmarketingdigital.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/#primaryimage"},"image":{"@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/#primaryimage"},"thumbnailUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg","datePublished":"2022-09-19T20:47:06+00:00","author":{"@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e"},"description":"Get information about the connected displays and the position of the windows in relation to those displays. September 14, 2020 Updated 14","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/rmarketingdigital.com\/de\/dev\/verwalten-sie-mehrere-bildschirme-mit-der-multiscreen-fenster-standort-api\/#primaryimage","url":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg","contentUrl":"https:\/\/rmarketingdigital.com\/wp-content\/uploads\/2020\/09\/hero-8140237.jpg","width":1200,"height":360,"caption":"hero-8140237-6820509-jpg"},{"@type":"WebSite","@id":"https:\/\/rmarketingdigital.com\/#website","url":"https:\/\/rmarketingdigital.com\/","name":"R Digital Marketing","description":"SEO Agency | Advertising social networks | Community Management","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rmarketingdigital.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/rmarketingdigital.com\/#\/schema\/person\/7c0d9782b2977b840b3740f00c69a73e","name":"R Digital Marketing","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c5599c203e0120b8ccbff4666af86f35f9b3dcad468a8bc6295313a3964a80be?s=96&d=mm&r=g","caption":"R Marketing Digital"}}]}},"_links":{"self":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/81778","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/comments?post=81778"}],"version-history":[{"count":0,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/posts\/81778\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media\/81779"}],"wp:attachment":[{"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/media?parent=81778"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/categories?post=81778"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rmarketingdigital.com\/en\/wp-json\/wp\/v2\/tags?post=81778"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}