SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How are you specifically targeting Samsung Galaxy S3

    Hey guys, running into some css issues with specifically the Samsung S3.

    We are in the process of converting some current sites into responsive and have got most of our break-points sorted but targeting this device is really becoming an issue.

    I know the dimensions are 1280x720 and pixel density is 2, but for some reason this is conflicting with my standard 1024x758 media queries.

    So what are you using to target this device?



    Thanks,
    Ben

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Don't forget to include

    Code:
    <meta name="viewport" content="width=device-width">
    in your HTML. Media queries work a lot better with that in place.

  3. #3
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Don't forget to include

    Code:
    <meta name="viewport" content="width=device-width">
    in your HTML. Media queries work a lot better with that in place.
    Hey Ralph,

    Definitely have that bad boy in place Went through that whole process of testing different meta tags too targeting pixel densities and specific width and the rest. Using the one above now which is working fine. It's just the actual @media only screen and (min-device-width blah blah that is causing an issue..

  4. #4
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Hi Chandler,
    I would not use device-width. Since I cannot see your media queries, I would say that that is your issue. Responsive design is device agnostic and using device-width is almost anti-responsive - since you are designing for that device width.

    Instead, use max-width and min-width if you have to. Shrink your browser window, when it breaks your site - you have your break point. Fix that and then shrink again. This method of using the max-width then will be more consistent irrespective of the device, orientation or pixel density.

    Using max-device-width is just a rabbit trail of getting specific with orientation and pixel density etc..

  5. #5
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by conradical View Post
    Hi Chandler,
    Instead, use max-width and min-width if you have to. Shrink your browser window, when it breaks your site - you have your break point. Fix that and then shrink again. This method of using the max-width then will be more consistent irrespective of the device, orientation or pixel density.

    Using max-device-width is just a rabbit trail of getting specific with orientation and pixel density etc..
    Hmmm I didn't think of it that way. Ok ok that has me thinking. Thanks mate - going to give it a test

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by conradical View Post
    Responsive design is device agnostic and using device-width is almost anti-responsive - since you are designing for that device width.
    That's not really true of the device-width meta element. Mobile devices tend to display a site at a width of around 800-1000px by default (called the "layout viewport"), meaning that a lot of the page is off screen. So media queries will be unreliable without the meta element, because you don't know how wide the device thinks the page is. Using the meta element ensures that the layout viewport matches the pixel width set by the device vendor as the width of the screen ("device independent pixels"). So by using the meta element, you'll know that on devices like the iPhone, media queries targeting a device width of 320px will kick in as expected.

  7. #7
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    31
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    That's not really true of the device-width meta element. Mobile devices tend to display a site at a width of around 800-1000px by default (called the "layout viewport"), meaning that a lot of the page is off screen. So media queries will be unreliable without the meta element, because you don't know how wide the device thinks the page is. Using the meta element ensures that the layout viewport matches the pixel width set by the device vendor as the width of the screen ("device independent pixels"). So by using the meta element, you'll know that on devices like the iPhone, media queries targeting a device width of 320px will kick in as expected.
    Hey Ralph,

    So just thinking out-loud regarding his 'max-width' point. I'm thinking that setting a max width only in the media queries and meta tag MIGHT give me greater control.

    I.e.

    max-width: 320px (portrait)
    max-width: 480px (landscape)
    max-width: 720px (samsung galaxy portrait)
    max-width: 768px (ipads etc)

    and then the rest should be fine..

    Well that's my sort of logic. Gotta test this out next week.

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by bChandler View Post
    I'm thinking that setting a max width only in the media queries and meta tag MIGHT give me greater control.
    That's my understanding of it, based on a recent video I watched that is worth viewing:

    http://www.youtube.com/watch?v=4wscVOXjIzQ

    Particularly about 50 minutes in, where he addresses this issue in detail.

  9. #9
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    I might have exaggerated to make a point... sure you can combine device width queries with the content=max-device-width meta tag. But we are really not worried, nor should we be, about the device width. So while it is available and possible to use, I don't think we should use it. So I think that meta viewport and width queries are the best options.

  10. #10
    SitePoint Wizard bronze trophy conradical's Avatar
    Join Date
    Jan 2005
    Location
    Atlanta
    Posts
    2,355
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    bChandler, here is a good read as well: http://www.quirksmode.org/blog/archi...ning_meta.html


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
  •