Как рассчитать масштаб просмотра или экрана в угловом 5? [Дубликат]

zoom = ( window.outerWidth - 10 ) / window.innerWidth

Это все, что вам нужно.

function supportFullCss3()
{
    var div = document.createElement("div");
    div.style.display = 'flex';
    var s1 = div.style.display == 'flex';
    var s2 = 'perspective' in div.style;

    return (s1 && s2);
};

function getZoomLevel()
{
    var screenPixelRatio = 0, zoomLevel = 0;

    if(window.devicePixelRatio && supportFullCss3())
        screenPixelRatio = window.devicePixelRatio;
    else if(window.screenX == '0')
        screenPixelRatio = (window.outerWidth - 8) / window.innerWidth;
    else
    {
        var scr = window.frames.screen;
        screenPixelRatio = scr.deviceXDPI / scr.systemXDPI;
    }

    //---------------------------------------
    if (screenPixelRatio <= .11){ //screenPixelRatio >= .01 &&
      zoomLevel = "-7";
    } else if (screenPixelRatio <= .25) {
      zoomLevel = "-6";
    }else if (screenPixelRatio <= .33) {
      zoomLevel = "-5.5";
    } else if (screenPixelRatio <= .40) {
      zoomLevel = "-5";
    } else if (screenPixelRatio <= .50) {
      zoomLevel = "-4";
    } else if (screenPixelRatio <= .67) {
      zoomLevel = "-3";
    } else if (screenPixelRatio <= .75) {
      zoomLevel = "-2";
    } else if (screenPixelRatio <= .85) {
      zoomLevel = "-1.5";
    } else if (screenPixelRatio <= .98) {
      zoomLevel = "-1";
    } else if (screenPixelRatio <= 1.03) {
      zoomLevel = "0";
    } else if (screenPixelRatio <= 1.12) {
      zoomLevel = "1";
    } else if (screenPixelRatio <= 1.2) {
      zoomLevel = "1.5";
    } else if (screenPixelRatio <= 1.3) {
      zoomLevel = "2";
    } else if (screenPixelRatio <= 1.4) {
      zoomLevel = "2.5";
    } else if (screenPixelRatio <= 1.5) {
      zoomLevel = "3";
    } else if (screenPixelRatio <= 1.6) {
      zoomLevel = "3.3";
    } else if (screenPixelRatio <= 1.7) {
      zoomLevel = "3.7";
    } else if (screenPixelRatio <= 1.8) {
      zoomLevel = "4";
    } else if (screenPixelRatio <= 1.9) {
      zoomLevel = "4.5";
    } else if (screenPixelRatio <= 2) {
      zoomLevel = "5";
    } else if (screenPixelRatio <= 2.1) {
      zoomLevel = "5.2";
    } else if (screenPixelRatio <= 2.2) {
      zoomLevel = "5.4";
    } else if (screenPixelRatio <= 2.3) {
      zoomLevel = "5.6";
    } else if (screenPixelRatio <= 2.4) {
      zoomLevel = "5.8";
    } else if (screenPixelRatio <= 2.5) {
      zoomLevel = "6";
    } else if (screenPixelRatio <= 2.6) {
      zoomLevel = "6.2";
    } else if (screenPixelRatio <= 2.7) {
      zoomLevel = "6.4";
    } else if (screenPixelRatio <= 2.8) {
      zoomLevel = "6.6";
    } else if (screenPixelRatio <= 2.9) {
      zoomLevel = "6.8";
    } else if (screenPixelRatio <= 3) {
      zoomLevel = "7";
    } else if (screenPixelRatio <= 3.1) {
      zoomLevel = "7.1";
    } else if (screenPixelRatio <= 3.2) {
      zoomLevel = "7.2";
    } else if (screenPixelRatio <= 3.3) {
      zoomLevel = "7.3";
    } else if (screenPixelRatio <= 3.4) {
      zoomLevel = "7.4";
    } else if (screenPixelRatio <= 3.5) {
      zoomLevel = "7.5";
    } else if (screenPixelRatio <= 3.6) {
      zoomLevel = "7.6";
    } else if (screenPixelRatio <= 3.7) {
      zoomLevel = "7.7";
    } else if (screenPixelRatio <= 3.8) {
      zoomLevel = "7.8";
    } else if (screenPixelRatio <= 3.9) {
      zoomLevel = "7.9";
    } else if (screenPixelRatio <= 4) {
      zoomLevel = "8";
    } else if (screenPixelRatio <= 4.1) {
      zoomLevel = "8.1";
    } else if (screenPixelRatio <= 4.2) {
      zoomLevel = "8.2";
    } else if (screenPixelRatio <= 4.3) {
      zoomLevel = "8.3";
    } else if (screenPixelRatio <= 4.4) {
      zoomLevel = "8.4";
    } else if (screenPixelRatio <= 4.5) {
      zoomLevel = "8.5";
    } else if (screenPixelRatio <= 4.6) {
      zoomLevel = "8.6";
    } else if (screenPixelRatio <= 4.7) {
      zoomLevel = "8.7";
    } else if (screenPixelRatio <= 4.8) {
      zoomLevel = "8.8";
    } else if (screenPixelRatio <= 4.9) {
      zoomLevel = "8.9";
    } else if (screenPixelRatio <= 5) {
      zoomLevel = "9";
    }else {
      zoomLevel = "unknown";
    }

    return zoomLevel;
};

Это вопрос был опубликован, как и в прошлом, но сегодня, когда я искал тот же ответ «Как определить масштаб и время события», я не смог найти один ответ, который бы соответствовал всем браузерам.

Как сейчас: для Firefox / Chrome / IE8 и IE9, увеличение и уменьшение масштаба вызывает событие window.resize. Это можно сделать, используя:

$(window).resize(function() {
//YOUR CODE.
});

Проблема заключается в типах используемого монитора, монитора 4k и стандартного монитора. Chrome на сегодняшний день является самым умным, когда мы можем рассказать нам, что такое уровень масштабирования, используя window.devicePixelRatio, по-видимому, он может определить, что такое плотность пикселей и сообщает о том же номере, что важно.

Другие браузеры, не так много. IE и Edge, вероятно, являются самыми худшими, поскольку они значительно изменяют уровни масштабирования. Чтобы получить текст такого же размера на мониторе 4k, вам нужно выбрать 200% вместо 100% на стандартном мониторе.

По состоянию на май 2018 года, вот что мне нужно для определения уровней масштабирования для нескольких наиболее популярных браузеров, Chrome, Firefox и IE11. Я рассказываю, какой процент масштабирования. Для IE он сообщает 100% даже для 4k мониторов, которые на самом деле составляют 200%, но размер текста на самом деле тот же.

Вот скрипка: https://jsfiddle.net/ae1hdogr /

Если кто-то захочет взять удар в других браузерах и обновить скрипку, тогда, пожалуйста, сделайте это. Моя основная цель заключалась в том, чтобы охватить эти три браузера, чтобы определить, используют ли люди коэффициент масштабирования более 100% для использования моего веб-приложения и отображают уведомление о том, что коэффициент масштабирования арендодателя.

Я нашел эту статью чрезвычайно полезной. Огромное спасибо yonran. Я хотел передать дополнительное обучение, которое я нашел, применяя некоторые методы, которые он предоставил. В FF6 и Chrome 9 была добавлена ​​поддержка мультимедийных запросов от JS, что может значительно упростить подход к мультимедийным запросам, необходимый для определения увеличения FF. См. Документы в MDN здесь . Для моих целей мне нужно было только выяснить, был ли увеличен или увеличен браузер, мне не нужен фактический коэффициент масштабирования. Я смог получить ответ с одной строкой JavaScript:

var isZoomed = window.matchMedia('(max--moz-device-pixel-ratio:0.99), (min--moz-device-pixel-ratio:1.01)').matches;

Объединив это с решениями IE8 + и Webkit, которые были также одиночными линиями, я смог обнаружить масштабирование подавляющего большинства браузеров нажав наше приложение только с несколькими строками кода.

Этот ответ основан на комментариях о том, что devicePixelRatio неправильно возвращается на ответ user1080381.

Я обнаружил, что эта команда возвращалась некорректно и в некоторых случаях при работе с рабочим столом, Surface Pro 3 и Surface Pro 4.

Я обнаружил, что он работал на моем рабочем столе, но SP3 и SP4 отображали разные числа друг от друга и на рабочем столе.

Я заметил, что SP3 возвращался в полтора раза выше уровня масштабирования, который я ожидал. Когда я взглянул на настройки дисплея, SP3 был фактически установлен на 150% вместо 100%, который у меня был на моем рабочем столе.

Итак, решение комментариев должно состоять в том, чтобы разделить возвращаемое масштабирование уровень по шкале машины, на которой вы в данный момент находитесь.

Мне удалось получить масштаб в настройках Windows, выполнив следующее:

ManagementObjectSearcher searcher = new ManagementObjectSearcher("SELECT * FROM Win32_DesktopMonitor");
double deviceScale = Convert.ToDouble(searcher.Get().OfType<ManagementObject>().FirstOrDefault()["PixelsPerXLogicalInch"]);
int standardPixelPerInch = 96;
return deviceScale / standardPixelPerInch;

Так что в случае мой SP3, вот как этот код смотрит на 100% -ное масштабирование:

devicePixelRatio = 1.5
deviceScale = 144
deviceScale / standardPixelPerInch = 1.5
devicePixelRatio / (deviceScale / standardPixelPerInch) = 1

Умножение на 100 в исходном ответе user1080381 тогда даст вам масштаб 100 (%).

Это для Chrome, после ответа user800583 answer ...

Я потратил несколько часов на эту проблему и не нашел лучшего подхода, но:

• Есть 16 'zoomLevel', а не 10
• Когда Chrome полноэкранный / максимизированный, коэффициент равен window.outerWidth/window.innerWidth, а когда это не так, это соотношение представляется (window.outerWidth-16)/window.innerWidth, однако к 1-му случаю может быть применен второй.

Итак, я пришел к следующему ...

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

var snap = function (r, snaps)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return i; }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
);

И если вам нужен коэффициент:

var snap = function (r, snaps, ratios)
{
    var i;
    for (i=0; i < 16; i++) { if ( r < snaps[i] ) return eval(ratios[i]); }
};
var w, l, r;
w = window.outerWidth, l = window.innerWidth;
return snap((w - 16) / l,
            [ 0.29, 0.42, 0.58, 0.71, 0.83, 0.95, 1.05, 1.18, 1.38, 1.63, 1.88, 2.25, 2.75, 3.5, 4.5, 100 ],
            [ 0.25, '1/3', 0.5, '2/3', 0.75, 0.9, 1, 1.1, 1.25, 1.5, 1.75, 2, 2.5, 3, 4, 5 ]
);

Не тестировал это для IE, но если вы создадите элемент elem с

min-width: 100%

, то

window.document.width / elem.clientWidth

даст вам уровень масштабирования вашего браузера ( включая фактор document.body.style.zoom).

Мой коллега и я использовали сценарий из https://github.com/tombigel/detect-zoom . Кроме того, мы также динамически создаем элемент svg и проверяем его свойство currentScale. Он отлично работает на Chrome и, вероятно, в большинстве браузеров. В FF функция «только масштабировать текст» должна быть отключена. SVG поддерживается в большинстве браузеров . На момент написания этой статьи были протестированы на IE10, FF19 и Chrome28.

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('version', '1.1');
document.body.appendChild(svg);
var z = svg.currentScale;
... more code ...
document.body.removeChild(svg);

На мобильных устройствах (с Chrome для Android или Opera Mobile) вы можете обнаружить увеличение по окну. visualViewport.scale. https://developer.mozilla.org/en-US/docs/Web/API/Visual_Viewport_API

Обнаружение в Safari: document.documentElement.clientWidth / window.innerWidth (return 1, если нет масштабирования на устройстве).

В Internet Explorer 7, 8 и amp; 9, это работает:

function getZoom() {
    var screen;

    screen = document.frames.screen;
    return ((screen.deviceXDPI / screen.systemXDPI) * 100 + 0.9).toFixed();
}

Добавлен «+0.9», чтобы предотвратить ошибки округления (в противном случае вы получите 104% и 109%, если масштаб браузера установлен на 105% и 110% соответственно ).

В IE6 масштабирования не существует, поэтому нет необходимости проверять масштаб.

В основном у нас есть:

• window.devicePixelRatio, который учитывает как масштабирование на уровне браузера, так и плотность системы / плотность пикселей. * - на уровне масштабирования Mac / Safari не учитывается
• медиа-запросы
• vw / vh Единицы CSS
• resize, которое запускается при изменении уровня масштабирования, приводит к эффективному размеру изменения окна

, которого должно быть достаточно для normal UX. Если вам нужно определить уровень масштабирования, который может быть признаком плохого дизайна пользовательского интерфейса.

Pitch-zoom сложнее отслеживать и не рассматривается в настоящее время.

Это отлично поработало для меня в браузерах на основе webkit (Chrome, Safari):

function isZoomed() {
    var width, mediaQuery;

    width = document.body.clientWidth;
    mediaQuery = '(max-width: ' + width + 'px) and (min-width: ' + width + 'px)';

    return !window.matchMedia(mediaQuery).matches;
}

В Firefox, похоже, не работает.

Это также работает в WebKit:

var zoomLevel = document.width / document.body.clientWidth;

Обходной путь для FireFox 16+, чтобы найти DPPX (уровень масштабирования) исключительно с помощью JavaScript:

var dppx = (function (precision) {
  var searchDPPX = function(level, min, divisor) {
    var wmq = window.matchMedia;
    while (level >= min && !wmq("(min-resolution: " + (level/divisor) + "dppx)").matches) {
      level--;
    }
    return level;
  };

  var maxDPPX = 5.0; // Firefox 22 has 3.0 as maximum, but testing a bit greater values does not cost much
  var minDPPX = 0.1; // Firefox 22 has 0.3 as minimum, but testing a bit smaller values does not cost anything
  var divisor = 1;
  var result;
  for (var i = 0; i < precision; i++) {
    result = 10 * searchDPPX (maxDPPX, minDPPX, divisor);
    maxDPPX = result + 9;
    minDPPX = result;
    divisor *= 10;
  }

  return result / divisor;
}) (5);

Я придумал следующее:

1) Сделайте position:fixed <div> с width:100% ( id = zoomdiv )

2) когда страница загружается:

zoomlevel=$("#zoomdiv").width()*1.0 / screen.availWidth

И она работала для меня для масштабирования ctrl+ и ctrl-.

или я могу добавить строку к $(window).onresize() для получения активного уровня масштабирования

Код:

<script>
    var zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;

    $(window).resize(function(){
        zoom=$("#zoomdiv").width()*1.0 / screen.availWidth;
        alert(zoom);    
    });
</script>
<body>
    <div id=zoomdiv style="width:100%;position:fixed;"></div>
</body>

PS : это мой первый пост, помилуй любые ошибки

Ваши вычисления по-прежнему основаны на нескольких пикселях CSS. Сейчас они просто разные. Это точка полного масштабирования страницы.

Что бы вы хотели сделать в браузере на устройстве с разрешением 192dpi, поэтому обычно отображалось четыре пикселя устройства для каждого пикселя в изображении? При 50% увеличении этого устройства теперь отображается один пиксель изображения в одном пикселе устройства.

У меня есть это решение только для мобильных устройств (протестировано с Android):

jQuery(function($){

zoom_level = function(){

    $("body").prepend('<div class="overlay" ' +
                'style="position:fixed; top:0%; left:0%; ' +
                'width:100%; height:100%; z-index:1;"></div>');

    var ratio = $("body .overlay:eq(0)").outerWidth() / $(window).width();
    $("body .overlay:eq(0)").remove();

    return ratio;
}

alert(zoom_level());

});

Если вы хотите, чтобы уровень масштабирования сразу после перемещения пинча, вам, вероятно, придется установить небольшой тайм-аут из-за (но я не уверен, потому что я его не тестировал).

Для меня, для Chrome / Webkit, document.width / jQuery(document).width() не работает. Когда я сделал мое окно маленьким и увеличил масштаб на моем сайте, чтобы появились горизонтальные полосы прокрутки, document.width / jQuery(document).width() не равнялся 1 при масштабировании по умолчанию. Это связано с тем, что document.width включает часть документа за пределами области просмотра.

Работала с window.innerWidth и window.outerWidth. По какой-либо причине в Chrome внешняя ширина измеряется в пикселях экрана, а внутренняя ширина измеряется в пикселях css.

var screenCssPixelRatio = (window.outerWidth - 8) / window.innerWidth;
if (screenCssPixelRatio >= .46 && screenCssPixelRatio <= .54) {
  zoomLevel = "-4";
} else if (screenCssPixelRatio <= .64) {
  zoomLevel = "-3";
} else if (screenCssPixelRatio <= .76) {
  zoomLevel = "-2";
} else if (screenCssPixelRatio <= .92) {
  zoomLevel = "-1";
} else if (screenCssPixelRatio <= 1.10) {
  zoomLevel = "0";
} else if (screenCssPixelRatio <= 1.32) {
  zoomLevel = "1";
} else if (screenCssPixelRatio <= 1.58) {
  zoomLevel = "2";
} else if (screenCssPixelRatio <= 1.90) {
  zoomLevel = "3";
} else if (screenCssPixelRatio <= 2.28) {
  zoomLevel = "4";
} else if (screenCssPixelRatio <= 2.70) {
  zoomLevel = "5";
} else {
  zoomLevel = "unknown";
}

Это может или не может помочь кому-либо, но у меня была страница, на которой я не мог нормально попасть, независимо от того, какие трюки Css я пробовал, поэтому я написал JQuery-файл. Страница Center:

с уровнем масштабирования браузера, страница будет сдвигаться, если вы были на 100%, 125%, 150% и т. д.

Код ниже находится в файле JQuery с именем centerpage.js.

На моей странице мне пришлось ссылаться на JQuery и этот файл, чтобы он работал, хотя моя главная страница уже имела ссылку на JQuery.

<title>Home Page.</title>
<script src="Scripts/jquery-1.7.1.min.js"></script>
<script src="Scripts/centerpage.js"></script>

centerpage.js:

// centering page element
function centerPage() {
    // get body element
    var body = document.body;

    // if the body element exists
    if (body != null) {
        // get the clientWidth
        var clientWidth = body.clientWidth;

        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var left = (windowWidth - bodyWidth) / 2;

        // this is a hack, but it works for me a better method is to determine the 
        // scale but for now it works for my needs
        if (left > 84) {
            // the zoom level is most likely around 150 or higher
            $('#MainBody').removeClass('body').addClass('body150');
        } else if (left < 100) {
            // the zoom level is most likely around 110 - 140
            $('#MainBody').removeClass('body').addClass('body125');
        }
    }
}


// CONTROLLING EVENTS IN jQuery
$(document).ready(function() {
    // center the page
    centerPage();
});

Также, если вы хотите центрировать панель:

// centering panel
function centerPanel($panelControl) {
    // if the panel control exists
    if ($panelControl && $panelControl.length) {
        // request data for centering
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var panelHeight = $panelControl.height();
        var panelWidth = $panelControl.width();

        // centering
        $panelControl.css({
            'position': 'absolute',
            'top': (windowHeight - panelHeight) / 2,
            'left': (windowWidth - panelWidth) / 2
        });

        // only need force for IE6
        $('#backgroundPanel').css('height', windowHeight);
    }
}

У меня есть решение для этого с января 2016 года. Протестировано в браузерах Chrome, Firefox и MS Edge.

Принцип следующий. Соберите 2 точки MouseEvent, которые находятся далеко друг от друга. Каждое событие мыши содержит координаты экрана и документа. Измерьте расстояние между двумя точками в обеих системах координат. Хотя между системами координат существуют переменные фиксированные смещения из-за мебели браузера, расстояние между точками должно быть одинаковым, если страница не масштабируется. Причина для указания «далеко друг от друга» (я ставлю это как 12 пикселей), так что можно изменять малый масштаб (например, 90% или 110%).

Ссылка: https: // разработчик .mozilla.org / ru / docs / Web / Events / mousemove

Шаги:

1. Добавить слушателя перемещения мыши

   window.addEventListener("mousemove", function(event) {
       // handle event
   });
   

2. Захват 4 измерений из событий мыши:

   event.clientX, event.clientY, event.screenX, event.screenY
   

3. Измерьте расстояние d_c между двумя точками в клиентской системе
4. Измерьте расстояние d_s между двумя точками в экранной системе
5. Если d_c! = d_s, то применяется масштабирование. Разница между ними говорит об увеличении масштаба.

N.B. Только расчеты расстояния редко, например. когда вы можете пробовать новое событие мыши, которое далеки от предыдущего.

Ограничения: предполагается, что пользователь будет перемещать мышь хотя бы немного, а зум непознаваем до этого времени.

здесь он не меняется!:

<html>
 <head>
  <title></title>
 </head>
<body>
 <div id="xy" style="width:400px;">
  foobar
 </div>
 <div>
  <button onclick="alert(document.getElementById('xy').style.width);">Show</button>
 </div>
</body>
</html>

создать простой html-файл, нажать на кнопку. независимо от того, какой уровень масштабирования: он покажет вам ширину 400 пикселей (по крайней мере, с firefox и ie8)

Вы можете попробовать

var browserZoomLevel = Math.round(window.devicePixelRatio * 100);

Это даст вам процент масштабирования браузера.

Чтобы захватить событие масштабирования, вы можете использовать

$(window).resize(function() { 
// your code 
});