Obtener la posición de la ventana del navegador independientemente del zoom

¿Cómo puedo obtener el borde izquierdo de la ventana del navegador (incluyendo menú, borde, título, etc.) sin que se "arregle" para tener en cuenta el nivel de zoom? (This question aborda la pregunta básica, pero no tiene en cuenta el zoom.).Obtener la posición de la ventana del navegador independientemente del zoom

window.screenLeft o window.screenX funcionan bien en Chrome y Safari, pero estos reportan valores "fijos" usando IE6, IE8 y Firefox.

He considerado que puedo obtener el tamaño de la pantalla de forma más confiable, y tal vez determinar el factor de zoom usando eso o screen.deviceXDPI, pero no estoy seguro de cómo usaría eso para corregir la posición.

(Algunos de ustedes probablemente se estén preguntando por qué quiero hacer esto. Se debe a que un sitio web de capacitación abre una ventana del navegador en el lado derecho de la pantalla del usuario. . la aplicación quiere cambiar el tamaño sí para que se ajuste exactamente a la izquierda de la ventana del navegador)

EDITAR

debería haber mencionado dos cosas:.

estoy preguntando por el navegador de zoom que normalmente puede acceder desde una Vista m enu o manteniendo presionada la tecla Ctrl y girando la rueda del mouse. Como la mayoría de las páginas web no son capaces de responder a los cambios en (por ejemplo) tamaño de fuente predeterminado sin ensuciar su diseño, los navegadores implementan el zoom escalando todas las medidas, incluidos los píxeles. Para mantener las cosas consistentes, también escalan el cliente informado y el tamaño de la ventana, las posiciones del mouse, etc. El problema para mí es que quiero las medidas reales (sin escala).
Estoy buscando una solución de JavaScript.

Fuente

2010-10-14 Oliver Bock

-2

Si usted está buscando para hacer una aplicación a pantalla completa tiene que considerar esto: An expanding middle in CSS

Tener un vistazo a la LiveDemo para la respuesta aceptada. Esta solución compensa con elegancia cualquier efecto debido al acercamiento.

Fuente

2011-03-06 23:54:36

Lo sentimos, no buscan hacer una aplicación de pantalla completa. Tratando de averiguar dónde está la ventana del navegador. –

usted ha visto a How to detect page zoom level in all modern browsers?

Podemos utilizar window.devicePixelRatio o el método de búsqueda binaria sugerido allí para determinar la proporción de píxeles. A continuación, se escala window.screenX y window.screenY con este factor:

He probado esto en Firefox 48 y la posición de la ventana cambió con a lo sumo 2 píxeles al cambiar el nivel de zoom. El uso de window.devicePixelRatio o la búsqueda binaria dio esencialmente los mismos resultados. Supongo que tener 2 píxeles de distancia puede ser realmente molesto para las aplicaciones gráficas, pero determinar el nivel de zoom parece ser complicado.

<html> 
 
    <head> 
 
    <meta charset="UTF-8"> 
 
    </head> 
 
    <body> 
 
    <input id="button" type="button" value="Click me!"/> 
 
    <style id=binarysearch></style> 
 
    <div id=dummyElement>Dummy element to test media queries.</div> 
 
    <script> 
 
     var mediaQueryMatches = function(property, r) { 
 
      var style = document.getElementById('binarysearch'); 
 
      var dummyElement = document.getElementById('dummyElement'); 
 
      style.sheet.insertRule('@media (' + property + ':' + r + 
 
\t \t   \t ') {#dummyElement ' + 
 
\t \t \t   '{text-decoration: underline} }', 0); 
 
      var matched = getComputedStyle(dummyElement, null).textDecoration 
 
\t   == 'underline'; 
 
      style.sheet.deleteRule(0); 
 
      return matched; 
 
     }; 
 

 
     var mediaQueryBinarySearch = function(
 
      property, unit, a, b, maxIter, epsilon) { 
 
      var mid = (a + b)/2; 
 
      if (maxIter == 0 || b - a < epsilon) return mid; 
 
      if (mediaQueryMatches(property, mid + unit)) { 
 
\t    return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon); 
 
      } else { 
 
\t    return mediaQueryBinarySearch(property, unit, a, mid, maxIter-1, epsilon); 
 
      } 
 
     }; 
 

 
</script> 
 
<script type="text/javascript">  
 
    var b = document.getElementById("button"); 
 
    b.onclick = function() { 
 
     var pixelratio = mediaQueryBinarySearch(
 
\t  'min--moz-device-pixel-ratio', '', 0, 6000, 25, .00001); 
 

 
     console.log("devicePixelRatio:", window.screenX * window.devicePixelRatio, window.screenY * window.devicePixelRatio); 
 
     console.log("binary search:", window.screenX * pixelratio, window.screenY * pixelratio); 
 
     console.log(Math.abs(pixelratio - window.devicePixelRatio)); 
 
    } 
 
    </script> 
 
    </body> 
 
</html>

Fuente

2016-08-08 23:20:50 YellowBird

Obtener la posición de la ventana del navegador independientemente del zoom

Respuesta

Cuestiones relacionadas