title: Responsive images using srcset/sizes isn't respected by Safari iOS
body: <p>I have the following </p>
  
  <pre><code>        &lt;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"
          &gt;
  </code></pre>
  
  <p>which works fine on normal and hiDPI screens.</p>
  
  <p>But when the viewport's very small (below 400px) the logo doesn't fit therefore I need a smaller version of the image <strong>in terms of real length</strong>, which I created. Then I tried </p>
  
  <pre><code>            &lt;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"
              &gt;
  </code></pre>
  
  <p>Which works in terms of showing the <em>_small</em> image for viewports lower than 390 pixels - but now I've lost the "high resolution" factor; I cannot force the iOS browser in iphone5s to display a 220px image in length of 110px with the above syntax.</p>
  
  <p>Could you correct my syntax?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;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"&gt;</code></pre>
  </div>
  </div>
  </p>