Как вы можете получить соотношение пикселей пикселя/устройства CSS?

Я хочу найти соотношение между пикселями CSS и пикселями устройства.

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

CSS-пиксели - это единица, которую мы используем почти для всех - это то, что означает element.style.width, element.clientWidth, element.offsetWidth и т.д. Пиксели устройства - это пиксели, на которые на самом деле рисует браузер. Несколько свойств измеряют в пикселах устройства, например. window.screen.width, который представляет собой размер экрана (например, 1024), который не изменяется, когда пользователь увеличивает масштаб.

Мотивация: когда пользователь приближается, я хочу увеличить ширину и высоту холста (сохраняя стиль и ширину стиля.), то же самое значение пикселя CSS), scale() контекст и перерисовка на четком увеличенном холсте.

Я прочитал Quirksmode A Сказка о двух видах и Высокий DPI в Saffin Safari, но ни один из них не говорит, как получить соотношение. Единственные идеи, которые я имею до сих пор, - собрать mousemoves и измерить изменение в event.clientX, деленное на изменение event.screenX, или для программного создания медиа-запросов с помощью moz--min-device-pixel-ratio, используйте getComputedStyle(), чтобы проверить, соответствовало ли это правилу и узким это вниз с бинарным поиском. Надеюсь, там будет более простой/надежный способ.

Изменить. Я пробовал использовать запросы @media (-webkit-min-device-pixel-ratio:1) с помощью Chrome, Safari и Firefox 4, и, видимо, Webkit рассматривает свойство как постоянный пиксель устройства для пикселя экрана (которое не изменяется с увеличением), тогда как Firefox 4 рассматривает его как пиксель устройства для CSS-пикселя (что увеличивается при увеличении). Таким образом, в Firefox 4 я могу найти соотношение пикселей пикселя/устройства CSS с помощью двоичного поиска, но не с Webkit.

Ответ 1

Вы можете использовать window.devicePixelRatio в браузерах на основе Webkit, чтобы получить соотношение пикселей устройства непосредственно в JavaScript. Я использовал это в браузерах Google Chrome, Android (2.2+) и Mobile Safari. Однако я понятия не имею о других браузерах.

Ответ 2

Вы всегда можете использовать следующий метод, и он будет работать во всех браузерах

window.getDevicePixelRatio = function () {
    var ratio = 1;
    // To account for zoom, change to use deviceXDPI instead of systemXDPI
    if (window.screen.systemXDPI !== undefined && window.screen.logicalXDPI       !== undefined && window.screen.systemXDPI > window.screen.logicalXDPI) {
        // Only allow for values > 1
        ratio = window.screen.systemXDPI / window.screen.logicalXDPI;
    }
    else if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    return ratio;
};

Ответ 3

Существует намного лучшее решение CSS/JS:

/** sample media query for pixel-ratio=2" **/
@media  
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
  .pixel-ratio-holder:before {
   content: "2";
  }
}


function jsPixelRatio(){
   return window.getComputedStyle(document.querySelector('.pixel-ratio-holder'), 'before').getPropertyValue('content').replace(/[^a-z]/g,'') * 1;
}