Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>OK, this is a pretty serious misunderstanding (which is cool! :) ), so here's a brief explanation of what you might want to do.</p> <p>Firstly, any recent iPhone/iPod/iPad or many Android phones have Hi DPI screens, so you might already have something to test with. If not, and you are doing this professionally, just buy a 4G iPod Touch.</p> <p>In terms of how it works, for 99% of stuff, you need do nothing. If it worked how you suggested, then most websites would be a quarter of the size they should be, and the internet would be broken.</p> <p>For fonts, SVG, CSS box shadows, gradients and any other CSS drawn stuff, it's all good. Those things look awesome without any extra work. (Hence why we've been pushing towards everything in CSS for a while.)</p> <p>For bitmaps (i.e. pngs, jpgs, gifs), all you need to do is provide the image with 2x the resolution, but size it the same as normal.</p> <p>As an example, if your page had an image that was 100px by 100px, you'd provide an image that was 200px by 200px, but specify in CSS or as an attribute in HTML that it is 100px by 100px.</p> <p>The reason this works is that a pixel on the screen is not the same as a CSS pixel. This is a good thing, because otherwise as I say, things would be tiny.</p> <p>I guess that in hindsight, it might have been better to call the <code>px</code> unit in CSS something different, like a <code>dot</code> or something, but there you go.</p> <p>You'll sometimes see references to device independent pixels, which is the difference between the CSS <code>px</code>, and the real pixel on the screen.</p>
    singulars
    1. This table or related slice is empty.
    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.
    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