useDevicePixelRatio

カテゴリ

エクスポートサイズ

294 B

最終変更日

先週

window.devicePixelRatio をリアクティブに追跡します。

注意: window.devicePixelRatio の変更に対するイベントリスナーはありません。そのため、この関数は メディアクエリをプログラムでテストする (window.matchMedia) を使用し、この例で説明されているのと同じメカニズムを適用します。

デモ

ソースコード

デバイスピクセル比

pixelRatio: 1

ズームインとズームアウト（またはウィンドウを異なるスケーリング係数の画面に移動）して、値の変化を確認してください。

使用方法

JavaScript

import { useDevicePixelRatio } from '@vueuse/core'

export default {
  setup() {
    const { pixelRatio } = useDevicePixelRatio()

    return { pixelRatio }
  },
}

コンポーネントでの使用方法

この関数は、@vueuse/components パッケージを介して、レンダーレスコンポーネントバージョンも提供します。使用方法の詳細はこちら。

Vue

<template>
  <UseDevicePixelRatio v-slot="{ pixelRatio }">
    Pixel Ratio: {{ pixelRatio }}
  </UseDevicePixelRatio>
</template>

型定義

TypeScript

/**
 * Reactively track `window.devicePixelRatio`.
 *
 * @see https://vueuse.dokyumento.jp/useDevicePixelRatio
 */
export declare function useDevicePixelRatio(options?: ConfigurableWindow): {
  pixelRatio: Ref<number, number>
}
export type UseDevicePixelRatioReturn = ReturnType<typeof useDevicePixelRatio>