If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Well for digital media it really doesn't matter what you set the ppi at. 1000 px is 1000 px.
So a 500 px x 500 px image saved at 500 ppi will display the same as a 500 px x 500 px image saved at 72 ppi on a digital media device.
The pixel dimensions are what is important.
If you are working with a 1000px wide web site, you have room for 2, 500 x 500 images, regardless of the "ppi resolution" you saved the images at.
Best wishes,
Eye for Video

There are two factors that make this a necessity. First, mobile device screens are so small that you really need to utilise all of the*available*space. Second,*there are a lot of different screen resolutions out there.*The only way to utilise all of the space available on different sized screens is with a fluid layout.

I have found websites with a minimum width of 320px will look good on most high-end mobile devices like the iPhone, Android and Nokia N97. Here are the screen resolutions of some of the most popular devices:

Technically, the retina display on the iPhone 4 has a screen resolution of 640 x 960 pixels but don’t worry, if you optimise your site for 320 x 480, the iPhone 4 will scale it up by a factor of two so it fits the whole screen. You will need to insert higher resolution images – but more on that in the next section!

2. Include high res images for the iPhone 4 retina display

The iPhone 4 display has four times the number of pixels as that of the original iPhone. To prevent mobile sites from looking tiny, it magnifies them by 200%. That works great on text and vector images like SVG. But its not so hot on bitmap images (or even the HTML5 canvas so it would seem). To avoid pixelation, you need to insert alternative high resolution images for the iPhone 4.

Designers should create their Photoshop documents with a width of 640 pixels. Developers should export the images at full res for iPhone 4 and 50% res for everything else.

Here’s how to use a CSS media query to insert a high resolution image for iPhone 4:

The first line that might jump out at you as being a little unusual is probably -webkit-background-size: 100px 40px;. The -webkit-background-size CSS property takes two parameters: width and height. The parameters can be lengths, percentages or "auto", and can even be mixed, i.e. -webkit-background-size: 100% auto. This tells the browser to stretch the background image to a specific size.

The second interesting part is the media query @media screen and (-webkit-device-pixel-ratio: 2) {...}. This means that any styles contained within the curly braces only apply if the device has a pixel ratio of 2 (two physical pixels per measurement pixel). Inside the media query selector, we override the .myImage class, and replace the background image with the high resolution image myImage@2x.jpg

3. Turn off auto-scaling

Mobile devices will assume your website is optimised for desktop computers unless you tell them otherwise. Add a viewport meta tag to the head section of your HTML to set the width of your website to match the width of the display, render with a zoom level of 100% and prevent the user from zooming in/out.

First why wouldn't you just build it for the 640 resolution and allow the 320 screens to scale it down (scaling it down always works better then scaling it up).

In my, albeit limited, experience there are pitfalls in this approach.

1. Basically, you need to build a site that will fluidly adjust down to 320px wide. Why? Because some smart phones (particularly Symbian devices) screw up the web site if it is more than 320px wide.

2. You also need to allow for the side scroll bar as well. In practice this means reducing the minimum screen width to 300px. 310px might be ok, but it is safer to allow down to 300. So I design fluid screens ( no media queries) that automatically adjust from 800px down to 300px wide. I test specifically at 320px (on a Symbian device), and 600px and 800px widths (on a Kindle), to see that the display is optimal at these points.

Originally Posted by BluegillMedia

Second, rather then using a "-webkit-device-pixel-ratio" (which in my opinion are really just hacks that are not cross-browser or part of any standards) why wouldn't you just use a:

that CSS is compliant with all CSS3 capable browsers, rather then a web-kit which is hit-and-miss.

I basically agree, but are all smart phones CSS3 compliant? I doubt it. I'm going through all my web sites making them fluid, and it seems that some smartphones support only a subset of CSS2 let alone 3! If so, there is no magic bullet.

It seems to me that you have to decide whether to support Symbian devices. If so you need to either have separate sites (not good) or accept the compromises needed to meet the limitations of the device. This is still work in progress for me. I've overcome a number of issues by taking the minimum screen width down to 300px, and simplifying the code. In particular the levels of nested DIVs I'd used, but so far I can't get the Symbian phone to flow text round IFrames. It runs the text behind the frame, which makes it unreadable! Ho hum