Получить положение окна браузера независимо от увеличения

Как я могу получить окно браузера влево (включая меню, границу, подпись и т.д.), не будучи "фиксированным", чтобы учесть уровень масштабирования? (Этот вопрос затрагивает основной вопрос, но не рассматривает масштаб.).

window.screenLeft или window.screenX отлично работают в Chrome и Safari, но они сообщают "фиксированные" значения с использованием IE6, IE8 и Firefox.

Я подумал, что я могу получить размер экрана более надежно и, возможно, определить коэффициент масштабирования с помощью этого или screen.deviceXDPI, но я не уверен, как использовать его для исправления положения.

(Некоторые из вас, вероятно, задаются вопросом, почему я хочу это сделать. Это связано с тем, что веб-сайт для обучения открывает окно браузера в правой части экрана пользователя. Браузер общается с моим приложением с помощью тега script hack. Приложение хочет изменить размер, чтобы он соответствовал точно влево от окна браузера.)

ИЗМЕНИТЬ

Я должен был упомянуть две вещи:

  • Я спрашиваю о масштабировании браузера, который вы обычно можете получить из меню "Вид", или удерживая Ctrl и поворачивая колесико мыши. Поскольку большинство веб-страниц не в состоянии реагировать на изменения (например) размера шрифта по умолчанию, не опуская своего макета, браузеры реализуют масштабирование путем масштабирования всех измерений, включая пиксели. Чтобы сохранить согласованность, они также масштабируют размер клиентского и оконного размера, положение мыши и т.д. Проблема для меня в том, что я хочу реальные (немасштабированные) меры.
  • Я ищу решение для JavaScript.

Ответы

Ответ 1

Вы видели Как определить уровень масштабирования страницы во всех современных браузерах?

Мы можем использовать window.devicePixelRatio или предложенный там метод двоичного поиска для определения отношения пикселей. Затем мы масштабируем window.screenX и window.screenY с этим коэффициентом:

var X = window.screenX * pixelratio;
var Y = window.screenY * pixelratio;

Я тестировал это в Firefox 48, и положение окна изменилось не более чем на 2 пикселя при изменении уровня масштабирования. Использование window.devicePixelRatio или двоичный поиск дали практически те же результаты. Я думаю, что отключение 2 пикселя может быть очень раздражающим для графических приложений, но определение уровня масштабирования кажется грязным.

<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 +
		        	   ') {#dummyElement ' +
			           '{text-decoration: underline} }', 0);
            var matched = getComputedStyle(dummyElement, null).textDecoration
	        == '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)) {
	            return mediaQueryBinarySearch(property, unit, mid, b, maxIter-1, epsilon);
            } else {
	            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(
	    '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>

Ответ 2

Если вы хотите сделать полноэкранное приложение, вы рассмотрели это: Расширяющаяся среда CSS

Посмотрите на LiveDemo для принятого ответа. Это решение элегантно компенсирует любые эффекты из-за масштабирования.