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

Как я могу получить левый край окна браузера (включая меню, границу, заголовок и т. Д.), Не «фиксируя» его с учетом уровня масштабирования? (В этом вопросе рассматривается основной вопрос, но не рассматривается масштабирование.).

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

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

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

РЕДАКТИРОВАТЬ

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

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

javascript browser cross-browser zooming
person Oliver Bock    schedule 14.10.2010    source источник

Ответы (2)


arrow_upward
4
arrow_downward

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

Мы можем использовать 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>

person YellowBird    schedule 08.08.2016

arrow_upward
-2
arrow_downward

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

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

person Patrick Beardmore    schedule 06.03.2011
comment
Извините, не собираюсь делать полноэкранное приложение. Пытаюсь узнать, где находится окно браузера. - person Oliver Bock; 29.02.2012