質問編集履歴
3
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
#**私の理解と解釈**
|
|
2
|
+
|
|
1
3
|
高精細ディスプレイ向けのWebサイトを制作するときに2・3倍の画像を用意して表示すると綺麗に表示されるかと思います。
|
|
2
4
|
実際に2種類のサイズ（1倍・2倍）の画像を用意してiPhone（高精細ディスプレイ）で表示すると、同じ大きさで表示され、2倍の画像の方が綺麗に表示されます。
|
|
3
5
|
なぜ2倍の画像の方が綺麗に表示さるのでしょうか？
|
|
@@ -6,7 +8,7 @@
|
|
|
6
8
|
今回、質問するにあたり、ピクセルやviewportなどに関して調べました。
|
|
7
9
|
先に私がどのように理解しているのか述べた後に質問致します。
|
|
8
10
|
|
|
9
|
-
#デバイスピクセルとCSSピクセル
|
|
11
|
+
####**デバイスピクセルとCSSピクセル**
|
|
10
12
|
|
|
11
13
|
Retinaディスプレイなどの高精細ディスプレイが登場するまでは、ドットバイドットの環境でした。
|
|
12
14
|
デバイス（物理）ピクセルとCSS（論理）ピクセルが1対1の関係です。
|
|
@@ -14,7 +16,7 @@
|
|
|
14
16
|
このようなドットバイドットの環境ではない場合、制作するときにデバイスピクセルを意識することはほぼありません。
|
|
15
17
|
なぜならCSSピクセルを基準にするからです。
|
|
16
18
|
|
|
17
|
-
#Visual Viewport と Layout Viewport
|
|
19
|
+
####**Visual Viewport と Layout Viewport**
|
|
18
20
|
|
|
19
21
|
表示に関してですが、Visual Viewport と Layout Viewport の2つあります。
|
|
20
22
|
これらは、デバイスピクセルではなくCSSピクセルで測定されます。
|
|
@@ -27,10 +29,11 @@
|
|
|
27
29
|
|
|
28
30
|
※質問とは関係なく、ただの私感ですが device-width だとデイバイスピクセルを連想する気がするから別の名前の方がよい気がしなくもない...
|
|
29
31
|
|
|
30
|
-
#ブラウザのレンダリング
|
|
32
|
+
####**ブラウザのレンダリング**
|
|
31
33
|
|
|
32
34
|
ブラウザのレンダリングについては、ちゃんと理解できていません(´･ω･`)
|
|
35
|
+
大まか流れはわかります。
|
|
33
|
-
|
|
36
|
+
下記の通りです。
|
|
34
37
|
|
|
35
38
|
```
|
|
36
39
|
DOM → CSSOM → Render Tree → Layout → Paint
|
|
@@ -41,7 +44,7 @@
|
|
|
41
44
|
|
|
42
45
|
参考サイト：[Understanding the Critical Rendering Path](https://bitsofco.de/understanding-the-critical-rendering-path/)
|
|
43
46
|
|
|
44
|
-
#ドットバイドットの世界とは、もはや別世界
|
|
47
|
+
####**ドットバイドットの世界とは、もはや別世界**
|
|
45
48
|
|
|
46
49
|
ドットバイドットの世界と、device-widthを指定した世界はもはや別世界で、私たちが1pxと指定したものはデバイスピクセル上では2pxで指定される世界です。
|
|
47
50
|
下記の通りです。
|
|
@@ -51,7 +54,7 @@
|
|
|
51
54
|
私の理解については上記の通りです。
|
|
52
55
|
もし誤りがあれば、ご指摘ください((_ _ (´ω｀ )ﾍﾟｺ
|
|
53
56
|
|
|
54
|
-
#質問
|
|
57
|
+
#**質問**
|
|
55
58
|
|
|
56
59
|
実際に下記のHTMLファイルを用意してiPhone6で表示しました。
|
|
57
60
|
|
|
@@ -79,14 +82,14 @@
|
|
|
79
82
|
上記の画像は加工しているためわかりませんが、両方の画像は同じ大きさで表示され、600pxの画像の方が綺麗に表示されます。
|
|
80
83
|
疑問点とはしては2つございます。
|
|
81
84
|
|
|
82
|
-
##なぜ2倍のサイズの画像（600px）方が綺麗に表示さるのか？
|
|
85
|
+
####**なぜ2倍のサイズの画像（600px）方が綺麗に表示さるのか？**
|
|
83
86
|
|
|
84
87
|
なぜ2倍の方が綺麗なのか、私の推測では、まずコードのpx値はCSSピクセルです。
|
|
85
88
|
300 と指定しても、デバイスピクセルでは 600 で表示されます。
|
|
86
89
|
そのため、600pxの画像の方が綺麗に表示されるのではないかというのが私の推測です。
|
|
87
90
|
私の推測に誤りはありますか？
|
|
88
91
|
|
|
89
|
-
##なぜ2種類の違う画像サイズが同じ大きさで表示されるのか？
|
|
92
|
+
####**なぜ2種類の違う画像サイズが同じ大きさで表示されるのか？**
|
|
90
93
|
|
|
91
94
|
なぜ同じ大きさなのか？については見当がつきません。
|
|
92
95
|
**ブラウザ側（もしくはデバイス側？）では、それぞれ大きさが異なる画像をどのようにレンダリング（処理）しているのでしょうか？**
|
2
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -89,7 +89,8 @@
|
|
|
89
89
|
##なぜ2種類の違う画像サイズが同じ大きさで表示されるのか？
|
|
90
90
|
|
|
91
91
|
なぜ同じ大きさなのか？については見当がつきません。
|
|
92
|
-
**ブラウザ側（もしくはデバイス側？）では、それぞれ
|
|
92
|
+
**ブラウザ側（もしくはデバイス側？）では、それぞれ大きさが異なる画像をどのようにレンダリング（処理）しているのでしょうか？**
|
|
93
|
+
**どこかで同じ大きさで表示するように処理しているのかと思いますが、どのタイミングでどのように処理することで、同じ大きさになっているのか大体で結構ですので知りたいです。**
|
|
93
94
|
|
|
94
95
|
---
|
|
95
96
|
ここからは私のモヤモヤしたところといいますか、理解できていないところなので、うまく言語化できていないかもしれません。
|
1
訂正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -79,14 +79,14 @@
|
|
|
79
79
|
上記の画像は加工しているためわかりませんが、両方の画像は同じ大きさで表示され、600pxの画像の方が綺麗に表示されます。
|
|
80
80
|
疑問点とはしては2つございます。
|
|
81
81
|
|
|
82
|
-
##なぜ2倍の方が綺麗に表示さるのか？
|
|
82
|
+
##なぜ2倍のサイズの画像（600px）方が綺麗に表示さるのか？
|
|
83
83
|
|
|
84
84
|
なぜ2倍の方が綺麗なのか、私の推測では、まずコードのpx値はCSSピクセルです。
|
|
85
85
|
300 と指定しても、デバイスピクセルでは 600 で表示されます。
|
|
86
86
|
そのため、600pxの画像の方が綺麗に表示されるのではないかというのが私の推測です。
|
|
87
87
|
私の推測に誤りはありますか？
|
|
88
88
|
|
|
89
|
-
##なぜ大きさ
|
|
89
|
+
##なぜ2種類の違う画像サイズが同じ大きさで表示されるのか？
|
|
90
90
|
|
|
91
91
|
なぜ同じ大きさなのか？については見当がつきません。
|
|
92
92
|
**ブラウザ側（もしくはデバイス側？）では、それぞれ実際の大きさが違う画像をどのように表示（処理）しているのでしょうか？**
|