Grow your CSS skills. Land your dream job.

The difference between resolution and size in responsive design

  • # June 6, 2013 at 10:42 am

    I’ve started learning about responsive designs a few days ago. In many forums I’ve read about a “typical width” of a mobile device. Older threads suggest widths around 400px to distinguish a mobile and a desktop device. Newer ones take higher values around 700px. Today, smartphones have a screen which is more than 1100px wide (e.g. IPhone 5), so we should actually take a value around 1200px. But hang on, there are still about 30% of desktop or laptop users who have a display not wider than 1280px. So we risk to show a design made for mobile devices on a desktop or laptop screen, don’t we?
    Since the screens of a smartphone and a normal desktop can have the same resolution, but a completely different size, resolution does not appear to me to be the best value to distinguish mobile and desktop devices. Resolution has actually nothing to do with physical screen size, and that should be what we are interested in. So is there a better value to do media querys with?

    # June 6, 2013 at 10:57 am

    >Today, smartphones have a screen which is more than 1100px wide (e.g. IPhone 5), so we should actually take a value around 1200px.

    I’m not sure that is true. As I understand it, the **display** resolution is the same as usual it’s just that the retina devices use more **physical** pixels to display the same resolution.

    Or do I have that wrong?

    # June 6, 2013 at 11:20 am

    I believe you’re referring to PPI, @pailie_d

    # June 6, 2013 at 11:25 am

    Possibly, I’m not completely in the know on these things but I’m pretty sure that anthing 1100px wide on an iPhone is not going to look very good.

    # June 6, 2013 at 12:13 pm

    Just kick in the media queries as and when you need them I say…depending on the layout I happily address my smallest major breakpoint around 450px-550px.

    Nothing beats testing it on a real device though…

    # June 6, 2013 at 3:32 pm

    Thanks. So I’ll just get a bit of experience first and see how it works.

    I’ve found an interesting article on this topic
    [here. ](http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/ “http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/”)

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

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".