Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I supposed this can also be achieved by using some CSS or Javascript magic to display only the appropriate picture. The main idea is to insert the two pictures, normal and high resolution and then to set the CSS attribute <em>display</em> to <em>none</em> for the pictures to mask :</p> <p><strong>HTML file</strong></p> <pre><code>&lt;link href="default.css" rel="stylesheet" media="screen" type="text/css" /&gt; &lt;link href="highresolution.css" media="screen and (-webkit-min-device-pixel-ratio:2)" type="text/css" rel="stylesheet" /&gt; </code></pre> <p>...</p> <pre><code>&lt;img src="image.png" width="..." height="..." class="normalRes" /&gt; &lt;img src="image@2x.png" width="..." height="..." class="highRes" /&gt; </code></pre> <p><strong>CSS file : default.css</strong></p> <pre><code>.normalRes { display:block } /* or anything else */ .highRes { display:none } </code></pre> <p><strong>CSS file : highresolution.css</strong></p> <pre><code>.normalRes { display:none } .highRes { display:block } /* or anything else */ </code></pre> <p>I've test it a little bit and it worked well. Need more tests now. I've found the solution here : <a href="http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport" rel="nofollow">http://www.mobilexweb.com/blog/iphone4-ios4-detection-safari-viewport</a></p> <h1>UPDATE 2012-06-24</h1> <p>Here is another solution with no need for <em>highresolution.css</em> file.<br> Add the following code in <em>default.css</em>.</p> <pre><code>@media all and (-webkit-min-device-pixel-ratio: 2) { .normalRes { display:none } .highRes { display:block } ... </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload