Activity Stream
701 MEMBERS
2505 ONLINE
Subscribe to our Newsletter BlackHatKings On Twitter BlackHatKings On Facebook BlackHatKings On Google+
Results 1 to 2 of 2
  1.     
    #1
    EasyMoney's Avatar




    Website's:
    onlinewebsiteworth.com

    Star Retina Display Media Query

    For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x":

    Code: 
    @media 
    (-webkit-min-device-pixel-ratio: 2), 
    (min-resolution: 192dpi) { 
        /* Retina-specific stuff here */
    }
    
    Or other highish-res:
    
    /* 1.25 dpr */
    @media 
    (-webkit-min-device-pixel-ratio: 1.25), 
    (min-resolution: 120dpi){ 
        /* Retina-specific stuff here */
    }
    
    /* 1.3 dpr */
    @media 
    (-webkit-min-device-pixel-ratio: 1.3), 
    (min-resolution: 124.8dpi){ 
        /* Retina-specific stuff here */
    }
    
    /* 1.5 dpr */
    @media 
    (-webkit-min-device-pixel-ratio: 1.5), 
    (min-resolution: 144dpi){ 
        /* Retina-specific stuff here */
    }
    #
    Old Stuff (don't use, keeping for posterity)

    Code: 
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-device-pixel-ratio: 2),
    only screen and (     -o-min-device-pixel-ratio: 2/1) { 
      
      /* Retina-specific stuff here */
    
    }
    This is more future proof...

    Code: 
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2),
    only screen and (   min--moz-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) { 
      
      /* Retina-specific stuff here */
    
    }
    Notes:

    The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed.
    Here's the spec on resolution units.

    Example:

    Let's say you had three major breakpoints in a design. This design also had a large background graphic and you wanted it looking it's best on any screen (retina or not) and not waste any bandwidth. You'd set up 6 media queries, one for each breakpoint and one for each one of those breakpoints on retina. Then you'd override the background image all the way down.

    Code: 
    @media only screen and (min-width: 320px) {
    
      /* Small screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 320px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 320px),
    only screen and (                min-resolution: 192dpi) and (min-width: 320px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 320px) { 
    
      /* Small screen, retina, stuff to override above media query */
    
    }
    
    @media only screen and (min-width: 700px) {
    
      /* Medium screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 700px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 700px),
    only screen and (                min-resolution: 192dpi) and (min-width: 700px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 700px) { 
    
      /* Medium screen, retina, stuff to override above media query */
    
    }
    
    @media only screen and (min-width: 1300px) {
    
      /* Large screen, non-retina */
    
    }
    
    @media
    only screen and (-webkit-min-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (   min--moz-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (     -o-min-device-pixel-ratio: 2/1)    and (min-width: 1300px),
    only screen and (        min-device-pixel-ratio: 2)      and (min-width: 1300px),
    only screen and (                min-resolution: 192dpi) and (min-width: 1300px),
    only screen and (                min-resolution: 2dppx)  and (min-width: 1300px) { 
    
      /* Large screen, retina, stuff to override above media query */
    
    }
    EasyMoney Reviewed by EasyMoney on . Retina Display Media Query For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x": @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } Or other highish-res: Rating: 5

  2.   Sponsored Links

  3.     
    #2
    Website's:
    onelogicsoft.com blog.onelogicsoft.com
    What are you using (code) to display retina?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Similar Threads

  1. Replies: 1
    Last Post: 16th Dec 2015, 09:03 AM

User Tag List

Tags for this Thread

BE SOCIAL