画面のスケール倍率(DPI)を取得する

Recipe ID: win-021

画面のスケール倍率(DPIスケールファクター)を取得する方法を紹介します。

高解像度ディスプレイ(Retinaディスプレイなど)対応や、キャンバス描画などで物理ピクセルと論理ピクセルの変換が必要な場合に使用します。
フロントエンドおよびバックエンドでスケールファクターを取得する手順について解説します。

前提条件

Permissions (権限) の設定

src-tauri/capabilities/default.json に以下の権限を追加します。

{
  "permissions": [
    ...,
    "core:window:default",
    "core:window:allow-scale-factor",
    "core:window:allow-inner-size"
  ]
}

1. フロントエンドから変更する (TypeScript)

サンプルコード

import { getCurrentWindow } from '@tauri-apps/api/window';

const appWindow = getCurrentWindow();

// 現在のスケールファクター (DPI倍率) を取得
const factor = await appWindow.scaleFactor();
console.log('Scale Factor:', factor); // 例: 1.5

// 物理サイズ (PhysicalSize) を取得
const physicalSize = await appWindow.innerSize();
console.log(`Physical: ${physicalSize.width} x ${physicalSize.height}`);

// 論理サイズ (CSSピクセル) に変換
const logicalSize = physicalSize.toLogical(factor);
console.log(`Logical: ${logicalSize.width} x ${logicalSize.height}`);

2. バックエンドから変更する (Rust)

use tauri::Manager;

#[tauri::command]
fn get_window_info(app_handle: tauri::AppHandle) {
    if let Some(window) = app_handle.get_webview_window("main") {
        // 現在のスケールファクター (DPI倍率) を取得
        let scale_factor = window.scale_factor().unwrap();
        println!("Scale Factor: {}", scale_factor);

        // 物理サイズ (PhysicalSize) を取得
        let physical_size = window.inner_size().unwrap();
        println!("Physical: {} x {}", physical_size.width, physical_size.height);

        // 論理サイズ (CSSピクセル) に変換
        let logical_size = physical_size.to_logical::<f64>(scale_factor);
        println!("Logical: {} x {}", logical_size.width, logical_size.height);
    }
}