レスポンシブ・イメージをテストする際の2つの注意点と開発者ツールの設定
WordPress 4.4で実装されたレスポンシブ・イメージをブラウザでテストしていた際、はまってしまって多くの時間を浪費してしまったので注意点を書き留めておきます。レスポンシブ・イメージをテストする際はお気をつけください！ 目次 キャッシュにご注意 Retinaディスプレイで見てませんか？ 開発者ツールの設定など 1. キャッシュにご注意 Mac Chrome 47でテストをしていて、ウィンドウ幅を変えてもレスポンシブ・イメージが反映されなくて不思議に思っていたんですが、よく考えてみたら画像がキャッシュから読み込まれていました。。。 Mac Chrome 47では、srcsetに記述のある画像がキャッシュにある場合、ウィンドウ幅を変えただけではそれ以下のサイズの画像を再度読み込まないようになっています。FirefoxやSafariとは違った挙動だったので、他に原因があると思って迷走してし
Chromeのsrcsetで誤解していた。
<img sizes="100vw" srcset=" https://dummyimage.com/240x160/000000/fff.png 200w, https://dummyimage.com/360x240/000000/fff.png 400w, https://dummyimage.com/600x400/000000/fff.png 600w, https://dummyimage.com/840x560/000000/fff.png 800w, https://dummyimage.com/1080x720/000000/fff.png 1000w, https://dummyimage.com/1200x800/000000/fff.png 1200w" alt="レスポンシブ画像"> なので、例えばPC画面サイズでは横長バナー画像に、モバイル画面サイズでは正方形バ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
