SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    If browser understands retina media query is background-size support guaranteed?

    If a mobile (phone/tablet) device's browser is smart enough to understand retina media queries (due to it being an actual retina screen) is background-size support automatic and guaranteed? All this time I've been assuming that's the case, but perhaps I'm wrong?

    Thanks.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,212
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Here's a handy reference: http://caniuse.com/background-img-opts

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    There are issues with the 'cover' value in ios and android.

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    There are issues with the 'cover' value in ios and android.
    So if I just used explicit pixel sizes, such as the following, I'd be fine?
    Code:
    .icon {
      -webkit-background-size: 48px 48px;
              background-size: 48px 48px;
    }
    By the way, since we're on the topic of media queries and background-size, the caniuse chart says that IE6-8 doesn't support background-size. I know those browsers also don't support media queries. So, is it safe to assume that any browser that supports media queries is guaranteed to support background-size as long as pixel are used for the dimensions?

    Thanks.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by champ View Post
    So if I just used explicit pixel sizes, such as the following, I'd be fine?
    Code:
    .icon {
      -webkit-background-size: 48px 48px;
              background-size: 48px 48px;
    }
    That's what I would have assumed to be true also. It's the 'cover' value that is the main problem.

    By the way, since we're on the topic of media queries and background-size, the caniuse chart says that IE6-8 doesn't support background-size. I know those browsers also don't support media queries. So, is it safe to assume that any browser that supports media queries is guaranteed to support background-size as long as pixel are used for the dimensions?
    Thanks.
    I don't think its explicitly safe to assume that as some older android/webkit will support media queries but not perhaps background-size. It doesn't really matter anyway as you can specify background-size on a separate rule and browsers that don't understand it will simply ignore it. You don't really need to hide it from them but just let them have the fallback of the normal background image.

  6. #6
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    262
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul O'B and ralph.m for your help. This clears it up for me.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •