Адаптивные изображения с помощью srcset/размеры не уважают Safari прошивкой

Question

У меня есть следующие

 <img 
      src="/img/footer/logo_white.png?v=2.0" 
      srcset="/img/footer/logo_white.png?v=2.0 1x, 
        /img/footer/logo_white2x.png?v=2.0 2x" 
     > 

, который отлично работает на нормальных и HiDPI экранах.

Но если очень маленький (ниже 400 пикселей) видовой экран, логотип не подходит, поэтому мне нужна меньшая версия изображения с точки зрения реальной длины, которую я создал. Тогда я попытался

  <img 
       class="biw-logo" 
       sizes="(max-width: 390px) 110px, 175px" 
       src="/img/footer/biw_logo.png?v=2.0" 
       srcset="/img/footer/biw_logo_small.png?v=2.0 110w, 
         /img/footer/biw_logo.png?v=2.0 175w, 
         /img/footer/biw_logo2x.png?v=2.0 350w" 
      > 

, который работает в условиях, показывающий _small изображения для видовых ниже 390 пикселей - но теперь я потерял «высокое разрешение» фактор; Я не могу заставить браузер iOS в iphone5s отображать 220px-изображение длиной 110px с вышеупомянутым синтаксисом.

Не могли бы вы исправить мой синтаксис?

<img class="biw-logo" sizes="(max-width: 390px) 110px, 175px" src="http://placehold.it/175x75" srcset="http://placehold.it/110x50 110w, 
 
http://placehold.it/175x75 175w, http://placehold.it/350x150 350w">

Answer 1

Вы можете сделать это с srcset и sizes. В первом сообщить браузеру, какие изображения вы имеете в наличии и сколько пикселей в ширину эти изображения, это может быть сделано с srcset:

<img srcset=" 
    /img/footer/logo_white.png?v=2.0 300w, 
    /img/footer/logo_white2x.png?v=2.0 600w, 
    /img/footer/logo_white_small.png?v=2.0 150w 
"> 

Теперь браузер знает, что он может выбрать один из трех изображений, 150, 300 и 600 пикселей (я догадывался о размерах, фактическая ширина может отличаться).

Во-вторых, вы сообщаете браузеру, насколько большое изображение будет отображаться на веб-странице, это может быть достигнуто с sizes:

<img 
    sizes="(max-width: 400px) 150px, 300px" 
    srcset="..." 
> 

Теперь браузер знает, что если ширина окна просмотра является 400px или менее изображение будет отображаться в 150 пикселей по ширине, а для просмотров размером более 400 пикселей отображается 300 пикселей в ширину.

Этого достаточно для просмотра браузера, чтобы выбрать правильное изображение. На обычном рабочем столе с обычным экраном он выберет изображение 300w, а на рабочем столе HiDPI будет 600w. В небольшом окне просмотра с обычным экраном будет выбрано 150w и на небольшом окне просмотра с HiDPI 300w.

Если вы хотите получить дополнительную информацию о srcset и sizes, взгляните на http://ericportis.com/posts/2014/srcset-sizes/.