質問編集履歴
3
コメントのアドバイスに従ってDPIを修正した結果を追記
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,21 @@
|
|
|
1
|
+
**tabuu様のコメントを参考にDPIをみた所2.0になっていたので1.0にしてみました。**
|
|
2
|
+
|
|
3
|
+
結果：425pxまでは600pxが選択される
|
|
4
|
+
|
|
5
|
+
768PXまでは768pxが選択される！！！
|
|
6
|
+
|
|
7
|
+
PC版では300pxが選択される！！！
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
425pxまでが600pxになる以外は望んだとおりの結果となりました！！！。
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
1
19
|
**tabuu様の回答を基にsizesのPC版の要求画像サイズを300pxにしてみました**
|
|
2
20
|
|
|
3
21
|
|
2
コードの指摘された点を対応し動作確認を行った結果を追記。
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,3 +1,39 @@
|
|
|
1
|
+
**tabuu様の回答を基にsizesのPC版の要求画像サイズを300pxにしてみました**
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
```HTML5
|
|
6
|
+
|
|
7
|
+
<img class="alignleft" src="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg"
|
|
8
|
+
|
|
9
|
+
srcset="/wp-content/themes/foo-bar/images/foo_bar2_4_300x169.jpg 300w,
|
|
10
|
+
|
|
11
|
+
/wp-content/themes/foo-bar/images/foo_bar2_4-600x337.jpg 600w,
|
|
12
|
+
|
|
13
|
+
/wp-content/themes/foo-bar/images/foo_bar2_4-768x432.jpg 768w,
|
|
14
|
+
|
|
15
|
+
/wp-content/themes/foo-bar/images/foo_bar2_4.jpg 1400w"
|
|
16
|
+
|
|
17
|
+
sizes="(max-width: 425px) 100vw,
|
|
18
|
+
|
|
19
|
+
(max-width: 768px) 100vw,
|
|
20
|
+
|
|
21
|
+
(max-width: 820px) 100vw,
|
|
22
|
+
|
|
23
|
+
300px" alt="">
|
|
24
|
+
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
ネットワークタブで見てみましたが、300pxでも、600pxの画像が選択されていました。
|
|
28
|
+
|
|
29
|
+
何がいけないんでしょうか？やはりDPIの設定を行ってないからでしょうか？（もちろんネットワークタブのキャッシュはOFFにしてあります
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
1
37
|
**やりたい事・やってみた事**
|
|
2
38
|
|
|
3
39
|
①今までHTML5でコードを書いてきましたがRetina対応などは、やったことがありませんでしたが、業務上必要になってきたので
|
1
実機の動作について補足を記入
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -70,9 +70,11 @@
|
|
|
70
70
|
|
|
71
71
|
|
|
72
72
|
|
|
73
|
-
また、この問題が解決したとして、スマホ用に小さく表示された画像を拡大した時はfoo_bar2_4.jpgを表示させ画像が荒くなるのを防ぎたいとも
|
|
73
|
+
また、この問題が解決したとして、スマホ用に小さく表示された画像を拡大した時はfoo_bar2_4.jpgを表示させ画像が荒くなるのを防ぎたいとも考えております。
|
|
74
74
|
|
|
75
|
+
|
|
76
|
+
|
|
75
|
-
|
|
77
|
+
手持ちのAndroidスマホ実機で表示すると最大サイズのfoo_bar2_4.jpgが表示されます。Google PageSpeed Insitesでスコアが落ちてしまいました。
|
|
76
78
|
|
|
77
79
|
|
|
78
80
|
|