Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS The difference between resolution and size in responsive design

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #45329
    lukas
    Member

    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?

    #137832
    Paulie_D
    Member

    >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?

    #137834
    chrisburton
    Participant

    I believe you’re referring to PPI, @pailie_d

    #137835
    Paulie_D
    Member

    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.

    #137819
    iknowdavehouse
    Participant

    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…

    #137881
    lukas
    Member

    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)
  • The forum ‘CSS’ is closed to new topics and replies.