Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 8, 2012, 06:44 AM   #1
olup
macrumors regular
 
Join Date: Oct 2011
testing retina display media queries

I made an image sprite for some icons for a band's website that includes bigger icons for high resolution displays.

While the normal icons load fine and are valid css, the retina/high resolution icons don't apparently. I came across this snippet here to make it work, but it doesn't validate nor work. http://css-tricks.com/snippets/css/r...y-media-query/Here's the code:

Code:
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and ( -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
	.social a{
		background-image: url(../images/logos/sprites.png);
		background-repeat:no-repeat;
		display:block;
		height:100px;
		text-indent:-9999em;
		width:100px;
	}
	.facebook {
		background-position:0 -120px;
	}
	.facebook:focus,.facebook:hover {
		background-position:0 -220px;
	}
	.youtube {
		background-position:-130px -120px;
	}
	.youtube:focus,.youtube:hover {
		background-position:-130px -220px;
	}
	.twitter {
		background-position:-220px -120px;
	}
	.twitter:focus,.twitter:hover {
		background-position:-220px -220px;
	}
	.bandcamp {
		background-position:-310px -120px;
	}
	.bandcamp:focus,.bandcamp:hover {
		background-position:-310px -220px;
	}

}
I'm completely shooting in the dark here, since I don't have an appropriate device to test on. How can I fix this?
Any help would be greatly appreciated.

Last edited by olup; Feb 25, 2013 at 09:58 AM. Reason: Please use code tags
olup is offline   0 Reply With Quote
Old Dec 10, 2012, 05:27 AM   #2
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
The below media query works in all browsers and is considered future friendly:

Code:
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here, put your CSS sprite stuff here for Retina */
}
Your current style.css has some media code in it but not what you posted above so I assumed you removed it. Try this, simplify, see if it validates and works.
__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote
Old Dec 10, 2012, 12:20 PM   #3
olup
Thread Starter
macrumors regular
 
Join Date: Oct 2011
Quote:
Originally Posted by SrWebDeveloper View Post
The below media query works in all browsers and is considered future friendly:

Code:
@media 
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) { 
    /* Retina-specific stuff here, put your CSS sprite stuff here for Retina */
}
Your current style.css has some media code in it but not what you posted above so I assumed you removed it. Try this, simplify, see if it validates and works.
yes indeed I removed some of the code and uncluttered the css.

However I'm still confused what to implement within the brackets. Is it the actual sprite like I did with the non retina icons, using background-positioning or this ?

Code:
@media only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-device-pixel-ratio: 2) {
	span.location {
		background-image: url(location@2x.png);
		background-size: 50px 50px;
	}
Thank you very much for your help!
olup is offline   0 Reply With Quote
Old Dec 10, 2012, 02:29 PM   #4
SrWebDeveloper
macrumors 68000
 
SrWebDeveloper's Avatar
 
Join Date: Dec 2007
Location: Alexandria, VA, USA
 
Use my responsive code, not yours. Between the { and } insert any CSS that generates your sprites based on the high quality version intended for retina displays only. I did not simply copy/paste your previous CSS for the sprite because I assume it's the original low resolution version. If not, use that.

__________________
Jim Goldbloom
Sr. Web Developer, owner GoldTechPro, LLC
http://www.GoldTechPro.com
SrWebDeveloper is offline   0 Reply With Quote

Reply
MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes

Similar Threads
thread Thread Starter Forum Replies Last Post
iPod Touch 4th Gen Retina vs. iPhone Retina Display, Are they different? falconman515 iPod touch 15 Oct 29, 2014 12:21 PM
Install a Retina Display on Pre-Retina MacBook Pro 13? Capulet MacBook Pro 14 Sep 21, 2014 03:47 PM
Need help testing an Retina Macbook Pro bug! s4yunkim MacBook Pro 0 Aug 30, 2012 11:08 PM
Retina Display- Will it ruin non-retina games and apps? pkessler MacBook Pro 11 Jun 12, 2012 12:01 PM

Forum Jump

All times are GMT -5. The time now is 10:33 AM.

Mac Rumors | Mac | iPhone | iPhone Game Reviews | iPhone Apps

Mobile Version | Fixed | Fluid | Fluid HD
Copyright 2002-2013, MacRumors.com, LLC