Получить позицию окна браузера независимо от масштаба - PullRequest
Новая
       20

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

17 голосов
/ 14 октября 2010

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

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

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

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

EDIT

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

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

Ответы [ 2 ]

4 голосов
/ 09 августа 2016

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

Мы можем использовать 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>
0 голосов
/ 07 марта 2011

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

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

...