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 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/”)
You must be logged in to reply to this topic.