52
プログラミング生放送勉強会 第28回@東北大学

Windowsの画面スケーリングをきちんと理解しよう

Embed Size (px)

DESCRIPTION

 

Citation preview

Page 1: Windowsの画面スケーリングをきちんと理解しよう

プログラミング生放送勉強会 第28回@東北大学

Page 2: Windowsの画面スケーリングをきちんと理解しよう

7/12(土) - 13(日)

Page 3: Windowsの画面スケーリングをきちんと理解しよう
Page 4: Windowsの画面スケーリングをきちんと理解しよう

メーカー メーカーディスプレイ(インチ)

解像度(総画素数)

ピクセル密度(PPI)

dynabook T954 東芝 15.6 3,840×2,160 282

Yoga 2 Pro レノボ 13.3 3,200×1,800 276

LIFEBOOK UH90/M 富士通 14 3,200×1,800 262

XPS 11 デル 11.6 2,560×1,440 253

MacBook Pro Retina(13インチ) アップル 13 2,560×1,600 227

dynabook KIRA V834 東芝 13.3 2,560×1,440 220

LIFEBOOK UH90/M 富士通 13.3 2,560×1,440 220

LaVie Z NEC 13.3 2,560×1,440 220

MacBook Pro Retina(15インチ) アップル 15 2,880×1,800 220

Surface Pro 3 マイクロソフト 12 2,160×1,440 216

Surface Pro 2 マイクロソフト 10.6 1,920×1,080 208

UP2414Q(ディスプレイ単体) デル 23.8 3,840×2,160 185

Page 5: Windowsの画面スケーリングをきちんと理解しよう

1,920×1,080

Page 6: Windowsの画面スケーリングをきちんと理解しよう

3,840×2,160

プロ生@仙台

Window title

Page 7: Windowsの画面スケーリングをきちんと理解しよう

3,840×2,160

プロ生@仙台

Window title

Page 8: Windowsの画面スケーリングをきちんと理解しよう
Page 9: Windowsの画面スケーリングをきちんと理解しよう

1,920×1,0803,840×2,160

282PPI

15.6インチ

141PPI

15.6インチ

Page 10: Windowsの画面スケーリングをきちんと理解しよう

Windowsストアアプリ

(スタート画面含む)

デスクトップアプリ

(デスクトップ含む)

Page 11: Windowsの画面スケーリングをきちんと理解しよう
Page 12: Windowsの画面スケーリングをきちんと理解しよう

スケーリング ピクセル密度(PPI) 最低解像度

140% 174 1,920 x 1,080

180% 240 2,560 x 1,440

Page 13: Windowsの画面スケーリングをきちんと理解しよう

メーカー メーカーディスプレイ(インチ)

解像度(総画素数)

ピクセル密度(PPI)

スケーリング

dynabook T954 東芝 15.6 3,840×2,160 282 180%

Yoga 2 Pro レノボ 13.3 3,200×1,800 276 180%

ThinkPad 8 レノボ 8.3 1,920×1,080 272 140%

LIFEBOOK UH90/M 富士通 14 3,200×1,800 262 180%

XPS 11 デル 11.6 2,560×1,440 253 180%

dynabook KIRA V834 東芝 13.3 2,560×1,440 220 140%

LIFEBOOK UH90/M 富士通 13.3 2,560×1,440 220 140%

LaVie Z NEC 13.3 2,560×1,440 220 140%

Surface Pro 3 マイクロソフト 12 2,160×1,440 216 140%

Surface Pro 2 マイクロソフト 10.6 1,920×1,080 208 140%

ICONIA W4 エイサー 8 1,280×800 188 100%

UP2414Q(ディスプレイ単体) デル 23.8 3,840×2,160 185 140%

Page 14: Windowsの画面スケーリングをきちんと理解しよう
Page 15: Windowsの画面スケーリングをきちんと理解しよう

images/logo.scale-100.png

images/logo.scale-140.png

images/logo.scale-180.png

XAML

<Image Source="images/logo.png" />

HTML

<img src="images/logo.png" />

JavaScript

var uri = new Windows.Foundation.Uri('ms-appx:///images/logo.png');

var file = Windows.Storage.StorageFile.getFileFromApplicationUriAsync(uri);

C#

var uri = new System.Uri("ms-appx:///images/logo.png");

var file = Windows.Storage.StorageFile.GetFileFromApplicationUriAsync(uri);

Page 16: Windowsの画面スケーリングをきちんと理解しよう
Page 17: Windowsの画面スケーリングをきちんと理解しよう
Page 18: Windowsの画面スケーリングをきちんと理解しよう
Page 19: Windowsの画面スケーリングをきちんと理解しよう
Page 20: Windowsの画面スケーリングをきちんと理解しよう

Windows 8.1

Page 21: Windowsの画面スケーリングをきちんと理解しよう

DPI XP Vista 7 8 8.1 8.1アップデート

96通常のサイズ (96

DPI)

既定のスケール(96 DPI) – より多くの情報

小 – 100% (既定) 小 – 100%(S) 小 – 100%(S) 小 – 100%(S)

120大きなサイズ(120 DPI)

大きなスケール(120 DPI) – 読みやすいテキスト

中 (M) – 125% 中 – 125%(M) 中 – 125%(M) 中 – 125%(M)

144 大 (L) – 150% 大 – 150%(L) 大 – 150%(L) 大 – 150%(L)

192 特大 – 200%(E) 特大 – 200%(E)

240 超特大 – 250%(E)

Page 22: Windowsの画面スケーリングをきちんと理解しよう

Build 2014 Windows Desktop Development Platform Advancementsのスライドより

Page 23: Windowsの画面スケーリングをきちんと理解しよう

機能 XP Vista 7 8 8.1

コントロールパネルの[DPIスケール 設定]/[テキストやその他の項目の

大きさの変更]設定✔ ✔ ✔ ✔ ✔

[カスタム DPI 設定]/[カスタムサイズ変更オプション]設定 ✔ ✔ ✔ ✔ ✔

[Windows XP 形式の DPI スケーリングを使用する]チェックボックス ✔ ✔ ✔

[すべてのディスプレイで同じ拡大率を使用する]チェックボックス ✔

DPI 仮想化 ✔ ✔ ✔ ✔

DPI 対応にすることを宣言するためのAPI ✔ ✔ ✔ ✔

システムメトリックやDPIを取得するためのAPI ✔ ✔ ✔ ✔ ✔

ディスプレイのDPIを取得するためのAPI ✔

ユーザごとのDPI設定(システムDPI設定変更のために再起動不要) ✔ ✔ ✔

ディスプレイごとに異なる拡大率を使用する ✔

Page 24: Windowsの画面スケーリングをきちんと理解しよう
Page 25: Windowsの画面スケーリングをきちんと理解しよう

スケーリング ピクセル密度(PPI) 最低解像度

125% 120 1,280 x 960

150% 144 1,536 x 1,080※

200% 192 2,048 x 1,440※

250% 240 2,560 x 1,800※

Page 26: Windowsの画面スケーリングをきちんと理解しよう

メーカー メーカーディスプレイ(インチ)

解像度(総画素数)

ピクセル密度(PPI)

既定スケーリング

dynabook T954 東芝 15.6 3,840×2,160 282 250%

Yoga 2 Pro レノボ 13.3 3,200×1,800 276 250%

ThinkPad 8 レノボ 8.3 1,920×1,080 272 150%

LIFEBOOK UH90/M 富士通 14 3,200×1,800 262 250%

XPS 11 デル 11.6 2,560×1,440 253 200%

dynabook KIRA V834 東芝 13.3 2,560×1,440 220 200%

LIFEBOOK UH90/M 富士通 13.3 2,560×1,440 220 200%

LaVie Z NEC 13.3 2,560×1,440 220 200%

Surface Pro 3 マイクロソフト 12 2,160×1,440 216 200%

Surface Pro 2 マイクロソフト 10.6 1,920×1,080 208 150%

ICONIA W4 エイサー 8 1,280×800 188 100%

UP2414Q(ディスプレイ単体) デル 23.8 3,840×2,160 185 150%

Page 27: Windowsの画面スケーリングをきちんと理解しよう
Page 28: Windowsの画面スケーリングをきちんと理解しよう
Page 29: Windowsの画面スケーリングをきちんと理解しよう
Page 30: Windowsの画面スケーリングをきちんと理解しよう

モニタごとのDPI:150% モニタごとのDPI:100%

Page 31: Windowsの画面スケーリングをきちんと理解しよう

モニタごとのDPI:150% モニタごとのDPI:100%

Page 32: Windowsの画面スケーリングをきちんと理解しよう

96 (100%) 120 (125%) 144 (150%) 192 (200%)

96 (100%) 変更なし 125% 150% 200%

120 (125%) 80% 変更なし 120% 160%

144 (150%) 66.7% 83.3% 変更なし 133.3%

192 (200%) 50% 62.5% 75% 変更なし

Page 33: Windowsの画面スケーリングをきちんと理解しよう
Page 34: Windowsの画面スケーリングをきちんと理解しよう
Page 35: Windowsの画面スケーリングをきちんと理解しよう
Page 36: Windowsの画面スケーリングをきちんと理解しよう
Page 38: Windowsの画面スケーリングをきちんと理解しよう
Page 39: Windowsの画面スケーリングをきちんと理解しよう

<asmv3:application xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">

<asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">

<dpiAware>True/PM</dpiAware>

</asmv3:windowsSettings>

</asmv3:application>

False DPI-awareでないアプリケーション

100%以外は常にDPI仮想化によるスケーリング

True システムDPI–awareなアプリケーション

システムDPIに対しては常にXP形式のDPIスケーリングディスプレイごとのDPIに対してはDPI 仮想化

Per-MonitorWindows 8.1ではMonitor DPI–awareなアプリケーションWindows Vista ~ 8 ではDPI-awareでないアプリケーション

True/PMWindows 8.1ではMonitor DPI–awareなアプリケーションWindows Vista ~ 8 ではシステムDPI–awareなアプリケーション

Page 40: Windowsの画面スケーリングをきちんと理解しよう
Page 41: Windowsの画面スケーリングをきちんと理解しよう

プライマリモニタ150%(システムDPI、モニタごとのDPI)

セカンダリモニター100%(モニタごとのDPI)

DPI-awareでないアプリケーション

100%をDPI仮想化で150%に拡大するので、ぼける

100%なのでぼけない

システムDPI–awareなアプリケーション(モニタごとのDPI非対応)

ぼけない150%をDPI仮想化で100%縮小

するので、ぼける

Monitor DPI–awareなアプリケーション

ぼけない ぼけない

Page 42: Windowsの画面スケーリングをきちんと理解しよう

システムDPI モニタごとのDPI

Win32自前で対応サンプルあり

自前で対応サンプルあり

Windowsフォーム △AutoScaleModeプロパティ

自前で対応

WPF ○自前で対応サンプルあり

Page 43: Windowsの画面スケーリングをきちんと理解しよう
Page 44: Windowsの画面スケーリングをきちんと理解しよう

100%(96DPI)

150%(144DPI)

200%(192DPI)

250%(240DPI)

論理的な1ピクセル 1ピクセル 1.5ピクセル 2ピクセル 2.5ピクセル

Page 45: Windowsの画面スケーリングをきちんと理解しよう

http://code.msdn.microsoft.com/windowsdesktop/Per-Monitor-Aware-WPF-e43cde33

Page 46: Windowsの画面スケーリングをきちんと理解しよう
Page 47: Windowsの画面スケーリングをきちんと理解しよう

Where does 96 DPI come from in Windows? - fontblog - Site Home - MSDN Blogs

Page 48: Windowsの画面スケーリングをきちんと理解しよう
Page 49: Windowsの画面スケーリングをきちんと理解しよう
Page 50: Windowsの画面スケーリングをきちんと理解しよう
Page 51: Windowsの画面スケーリングをきちんと理解しよう
Page 52: Windowsの画面スケーリングをきちんと理解しよう

http://msdn.microsoft.com/ja-JP/library/dn469266.aspx

http://msdn.microsoft.com/ja-jp/windows/dd630126.aspx

http://grabacr.net/archives/1132

http://msdn.microsoft.com/ja-jp/magazine/dn574798.aspx