Register FAQ / Rules Forum Spy Search Today's Posts Mark Forums Read
Go Back   MacRumors Forums > Special Interests > Visual Media > Web Design and Development

Reply
 
Thread Tools Search this Thread Display Modes
Old Dec 8, 2012, 05: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 08:58 AM. Reason: Please use code tags
olup is offline   0 Reply With Quote
Old Dec 10, 2012, 04: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, 11:20 AM   #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, 01: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
Install a Retina Display on Pre-Retina MacBook Pro 13? Capulet MacBook Pro 4 Mar 12, 2013 02:40 PM
iPod Touch 4th Gen Retina vs. iPhone Retina Display, Are they different? falconman515 iPod touch 13 Nov 28, 2012 02:31 AM
Need help testing an Retina Macbook Pro bug! s4yunkim MacBook Pro 0 Aug 30, 2012 10:08 PM
Retina Display- Will it ruin non-retina games and apps? pkessler MacBook Pro 11 Jun 12, 2012 11:01 AM

Forum Jump

All times are GMT -5. The time now is 08:15 PM.

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

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