Screen resolution vs viewport in Responsive Web Design

blog feature image

When taking on Responsive Web Design (RWD) and looking to cater for screens of all different shapes and sizes, I think it is largely lost on the consumers that screen resolution does not equal how big a website can be and will appear (and look good) on their mobile device.

Whether it be tablets / iPads, smart phones / iPhones, there seems to be a misconception that whatever the resolution the device lists on its specifications page, that should match the dimensions that the website should take on. Or more to the point, should be able to take on.

But this assumption is incorrect and with good reason – if a website strictly followed the resolution of a device (such as an iPad with Retina support) then it would look teenie tiny (technical term). The question then is, what is the difference between viewport and resolution when it comes to displaying web pages and taking on responsive web design projects?
Read more Screen resolution vs viewport in Responsive Web Design