title: Max image width in Mobile Safari? Getting unwanted downscaling on panos
body: <p>I want to display very wide, panoramic images in Mobile Safari (iPhone, iPod, iPad). These work fine in OS X Safari and in other browsers, but on Mobile Safari there seems to be a limit on the maximum image width.</p>
  
  <p>Consider this web page:</p>
  
  <p><a href="http://basepath.com/public/test1.html" rel="nofollow noreferrer">http://basepath.com/public/test1.html</a></p>
  
  <p>with this source:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'&gt;
  &lt;title&gt;Test Image 1&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;
  2415 x 750 (about 3.2:1)
  &lt;p&gt;
  &lt;img src='http://farm5.static.flickr.com/4129/4987348894_76194e79d6_o.jpg' /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It does exactly what I want on Mobile Safari. You can pan the photo. The aspect ratio is about 3.2:1.</p>
  
  <p>But a wider image, about 4:1, gets scaled down, as seen on this page:</p>
  
  <p>[<a href="http://]basepath.com/public/test2.html" rel="nofollow noreferrer">http://]basepath.com/public/test2.html</a></p>
  
  <p>[My low reputation prevents me from providing the above as a link. Limited to just one.]</p>
  
  <p>The source is identical except for the commentary and image:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta name = 'viewport' content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0'&gt;
  &lt;title&gt;Test Image 2&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;p&gt;
  3028 x 750 (about 4:1)
  &lt;p&gt;
  &lt;img src='http://farm5.static.flickr.com/4113/4994072964_1a7f7f90fe_o.jpg' /&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong><em>You have to view these on Mobile Safari to see the problem.</em></strong></p>
  
  <p>Before you answer, some additional facts:</p>
  
  <ol>
  <li><p>Image #2, which doesn't work, is only 200K (very low JPEG quality). Image #1, which does, is 700K. So size isn't the problem.</p></li>
  <li><p>Putting an explicit width and height on the IMG element does indeed make the image the right size, but it's scaled up and therefore has jaggies. I want actual pixels. The problem therefore seems to be in loading the image originally, not processing it for presentation.</p></li>
  <li><p>I've tried it without the viewport meta stuff, with no effect.</p></li>
  </ol>
  
  <p>OK, now for my questions:</p>
  
  <ol>
  <li><p>Is there in fact a limit on how wide Mobile Safari will show an image? Does anyone know of documentation for it, and, if so, what the rules are?</p></li>
  <li><p>Is there any way to get around the problem? I've horsed around with JavaScript quite a bit to try to construct dynamic HTML to do the job, but, as I said above, I think the problem occurs when the image is first downloaded, far too early for anything done in JavaScript to be effective.</p></li>
  </ol>