次のlaravelコードがあります。
<img sizes="(min-width:600px)100vw, (max-width:601px)100vw"
srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
私がやろうとしているのは、幅 < 600px の場合は 600x600 の画像を表示し、幅 > 600px の場合は 410x620 の画像を表示することです。
上記のコードはデスクトップで動作します。ただし、iPhone (iOS 8.1.2、safari/chrome) では、代わりに 410x620 の画像が表示されます。IE9 - IE11 を除き、Picturefillが含まれていなくても (デスクトップとモバイルの両方で) 適切に動作します。
私がここに欠けているものはありますか？
解決策:
<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }}" media="(max-width: 600px)">
<source srcset="{{ asset('assets/img/img-home-experiences-410x620.jpg') }}" media="(min-width: 601px)">
<!--[if IE 9]></video><![endif]-->
<img sizes="100vw" srcset="{{ asset('assets/img/img-home-experiences-600x600.jpg') }} 600w, {{ asset('assets/img/img-home-experiences-410x620.jpg') }} 601w" class="img-responsive" />
</picture>