: Tools to simulate different DPI screens? When designing for mobile web, its important to check designs at the physical screen size of target device. Merely looking at your PC / Mac screen at

@Jessie844

There isn't any way to actually make a desktop display appear to have smaller pixel density. That is what you are asking about I think. Otherwise you would just minimize your browser or zoom out, depending on your approach. You could stand twice as far away I guess.

However, If you have a Mac with a retina display, you can zoom it in double and then see what the graphics look like on a standard resolution monitor. So it does work in that one direction.

I think your best bet for testing (besides buying a new mac pro or ipad) would be to buy a cheap 4th gen ipod touch and check your images on there. That's what I've been doing.

For the most part, if you are designing responsively, you could have a div - set width or percentage - and inside and img. Then in the css you would just width: 100%; height: auto; the img. I've been making my images about 1.5->2 times the size as the max size I want them to be viewed - and then compressing them down a bit more then normal. They look great on retina - and they are still as small - it's crazy - and now I just don't really even worry about checking them. I just follow the recipe.

There were some really great articles on this. I tried to find them, but they have been buried by a ton of really silly ones.

Vote Up Vote Down

@Cooney243

Simulation is a waste of time. If you want to see what it will look like, go look at the device!

Here's my workflow: Export the graphics in question to a Dropbox folder that's connected on multiple devices where I can check it out. Fast, simple, and relatively accurate (it's not totally accurate until I see it in the browser).

Vote Up Vote Down

@Holmes874

There are virtual testing suits that are basically 'screen sharing' actual devices remotely. They work OK barring no other tools, but are cumbersome to use.

Ideally, you'd simply have the devices in-hand that you need to test against.

The problem with testing on screen is that it's simply different hardware. As you point out, you can't really change the PPI of your screen to match that of the device. In addition, you need to deal with emulating the default text sizes of the device in relation to the screen and other such parameters.

Finally, it's not necessarily universally true that your screen pixel will be larger than your high-def mobile screen. It depends on the OS and device.

iOS devices, for instance, will render your 1px desktop pixel as 4 retina pixels. Some other devices, though, such as high PPI BlackBerries, will simply render your 1px desktop pixel as 1 device pixel (meaning it may shrink everything way down).

Vote Up Vote Down