Treehouse: Grow your CSS skills. Land your dream job.

Pixel and viewport dimensions?

  • NBG
    # August 21, 2015 at 6:15 am

    Hi,

    i’ve found this page and i’m a little bit confused:

    http://www.canbike.org/CSSpixels/

    Okay i’m using this line of code:

    <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

    And i’m using some of these:

    @media screen and (min-width:640px) { … }

    But how can i optimize for the Samsung S6 for example?

    Pixel Width: 2560
    Pixel Height: 1440
    Device Width: 640
    Device Height: 360

    Can i ignore the pixel widths? So max-width:640px will fit to the S6?

    confused

    Thanks,
    NBG

    # August 21, 2015 at 6:46 am

    You’re going to get yourself into a whole heap of convoluted CSS mess if you concentrate on optimising for individual devices/screen sizes – there are way too many to account for now, and heaven knows what’s on the way in the future.

    Instead, optimise for your content.

    At its most basic level, resize your browser window, and when your content doesn’t fit into your layout, or your layout goes a bit hinky, set a media query breakpoint (tweakpoint) to fix your CSS within it.

    It helps if you mostly avoid absolute positioning and work in relative units that will fluidly expand and contract (% and vw/vh, etc) between breakpoints too.

    If you need more help with anything specific, you’ll need to provide some code or a sample page.

    # August 21, 2015 at 9:29 am

    Hey there!

    Definitely want to echo @Beverleyh‘s comment about targeting specific devices and the maintenance issues that come along with it.

    However, I do know there are times when it makes to do so. Here are some handy snippets for targeting specific devices we recently put together:

    https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

    Cheers!

    NBG
    # August 21, 2015 at 9:42 am

    Hi,

    the Samsung S6 was just an example.

    I don’t wanna optimize my page for this device, i’m just confused by the different pixel sizes (pixel width vs. device width).

    So @media screen and (min-width:640px) { … } would catch the S6?

    The format is 360×640 pixels but has just “more” pixels inside? High density?

    # August 21, 2015 at 11:20 am

    Yeah, ppi is of no influence on that query. There’s a bunch of other ones that target resolution. So you should be good (in landscape mode at least). I don’t think the scrollbar counts on mobile?

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.