8日
状態:検討中
閲覧数:2,196
投稿日:2015-08-14
更新日:2015-08-14
動作確認するたけで8日も要した
・本当に全然分からないため、困り果てた
このエントリーで言及している対象内容の具体例
ケース1.
ケース.2
・本当に全然分からないため、困り果てた
実際に遭遇したコード
このエントリーで言及している対象内容の具体例
ケース1.
<img src= "400.png" sizes= "(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw" srcset=" 100 .png 100 w, 200 .png 200 w, 400 .png 400 w, 800 .png 800 w, 1600 .png 1600 w, 2000 .png 2000 w"> |
ケース.2
<img sizes= "(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw" srcset= "img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w" alt= "幅に合わせた寸法での表示の例" > |
結論 / 「size属性にブレークポイント設定 × vw指定」の複数組み合わせ表示確認は、1件1件個別に確認していく方が無難
一気に確認しようとすると
不具合が生じる可能性がある
・以下のルールに抵触する場合、期待した表示を確認することが出来ない
表示確認する際、重要な意味を持つ仕様
sizes属性では、メディアクエリが当てはまる最初の条件が適用される
・後に記述した条件は、常に最初の条件に当てはまらない場合にしか適用されない
・リロードしても結果は変わらない。読込当初と同じ結果しか取得できない
キャッシュなの?
・根本的に考え方が異なる
・仮にキャッシュを無効にしても、読み込む度に、メディアクエリが当てはまる最初のsizes属性条件は常に適用される
不具合が生じる(可能性がある)ケース
複数の条件提示、もしくは、複数の結果表示を、1ページでまとめて実施しようとする
不具合が生じる(可能性がある)
・面倒でも、1件1件個別にチェックした方が、結局は確認が早く終了する
ケース1.
500px未満
・100vwなのでまとめて確認を実施しても問題はない
500px以上600px未満
・100vwなので1/2px
・この時、500px未満を事前に実施していると、結果が作用するため正しい内容を表示できなくなる
・一度srcsetで選択した内容より以前の選択項目には戻れない(仕様詳細は不明)
コード
<img src= "400.png" sizes= "(min-width: 600px) 25vw, (min-width: 500px) 50vw, 100vw" srcset=" 100 .png 100 w, 200 .png 200 w, 400 .png 400 w, 800 .png 800 w, 1600 .png 1600 w, 2000 .png 2000 w"> |
ケース2.
640px未満
・100vwなのでまとめて確認を実施しても問題はない
640px以上1140px未満
・50vwなので1/2px
・この時、640px未満を事前に実施していると、結果が作用するため正しい内容を表示できなくなる
・一度srcsetで選択した内容より以前の選択項目には戻れない(仕様詳細は不明)
コード
<img sizes= "(min-width: 1140px) 570px, (min-width: 640px) 50vw, 100vw" srcset= "img/400w.png 400w, img/600w.png 600w, img/800w.png 800w, img/1000w.png 1000w, img/1200w.png 1200w" alt= "幅に合わせた寸法での表示の例" > |