2

I am making a one page website that has a centered logo.

I have 4 versions of this logo. Regular size, regular@x2, mobile, mobile@x2.

I figured out how to serve most of the appropriate logos under appropriate circumstances, but cannot figure out how to serve the mobile@x2 version of the logo.

This is the media query codes that I'm using for these logos.

regular@x2:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)

mobile:

@media handheld, only screen and (max-width: 767px)

Is there a way to combine the two to create a version that gets served for retina displays when the browser window gets below 767px wide?

Vitaliy G.
  • 851
  • 1
  • 7
  • 20
  • 1
    This [**SO Question**](http://stackoverflow.com/q/13744542/1195891) may be of interest to you. Cheers! – arttronics Dec 09 '12 at 10:14
  • Thank you! I just decided to serve an SVG version of the logo :) Works well on modern devices and is much more lightweight. – Vitaliy G. Dec 09 '12 at 21:21

1 Answers1

0
@media (-webkit-min-device-pixel-ratio: 2) and (max-width: 767px), (min-resolution: 192dpi) and (max-width: 767px)

Should work, shouldn't it? Sorry, I don't have a retina display...

aNewStart847
  • 1,086
  • 7
  • 15