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