CODEWITHSUNDEEP
iphonecssmedia-queries
Blynn
Blynn

Reputation: 1411

Testing retina images with css and @media

I'm wondering how to test some retina images css on a regular browser? I also tried my previous code not the code below and wondered if it was working?

It's hard to tell if the correct image is load as this is the same images just better quality.

//retina stuff
@media all and (-webkit-min-device-pixel-ratio: 1.5) {
    #home {
          background: url('bg-home-x2.png') no-repeat;
}

.shelf {
    background: url('shelf-x2.png') no-repeat top center;
    height: 111px;
    padding-bottom: 0px;
}

#pantry {
    background: url('bg-pantry-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
}

#list {
    background: url('bg-cart-x2.png') no-repeat;
    width: 320px;
    height: 480px;
    z-index: -1;
    margin-top: -6px;
}
}

Upvotes: 2

Views: 1699

Answers (3)

andrewb
andrewb

Reputation: 5339

You actually can using Firefox:

  1. Go to "about:config"
  2. Find "layout.css.devPixelsPerPx
  3. Change it to your desired ratio (1 for normal, 2 for retina, etc.)

Refresh your page - boom, your media query has now kicked in! Hats off to Firefox for being awesome for web developing!

This was done on Windows 7 with Firefox 21.0.

Upvotes: 10

nickhar
nickhar

Reputation: 20823

You can't do this by default in a web browser using -min-device-pixel-ratio - As most computers/PCs don't have the required pixel ratio value to test it (other than newer high-end laptops/displays) .

The best way would be to use the devices or family of devices you're targeting, but in cases where you don't have them, the only way is to test your media queries through emulation, so perhaps one of the following might help:

  1. Using the Opera Mobile Emulator. This allows you to set up various test environments for common devices. It also allows you to define custom setups for resolution and pixel density:

    enter image description here

    It's available for Windows, Mac and Linux.

  2. There is also the Javascript-based Web Retina Emulator, but this won't parse CSS media queries, so it's just for simplistically checking the validity/integrity of images.

  3. If you are looking to emulate specific iOS devices, then you can use the iOS simulator (part of Xcode tools) to test retina displays - but this doesn't sound applicable and used more widely for the testing of native apps.

Upvotes: 1

Adam Simpson
Adam Simpson

Reputation: 3681

Probably the easiest way is to fire up a basic server (i.e. the Python web server on the command line) on your dev machine and then view the site on a Retina device and watch the server logs to see which files go across.

Upvotes: 1

Related Questions