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?