Not a mobile design person, but have to work with some of my vendors who are making a mobile site for my company.
The visual design images they provided has 3 breakpoints. Basically lines which says how the site will look for 320px, 600px and 768px above.
Now when I asked my vendor which will show up for iPhone 4 which has a resolution of 640 in portrait he says it will show 320 breakpoint. He showed me the following web site which has a column called Device-W which he says should be used during development of the web site. http://screensiz.es/phone
Now the thing is before I go for the development vendor I wanted someone to help me understand what is that Device-W in layman's term so that I am sure I am not making any wrong decision.
This link should help you.
device-width refers to the width of the device itself, in other words, the screen resolution of the device. Most mobile phones have a device-width of 480px or lower, including the popular iPhone 4 (with device-width: 320px), despite it technically having a 640 x 960 resolution. This is due to iPhone 4's retina display, which crams two device pixels into each CSS pixel on the screen. This is true for the Ipad 3 as well; its reported device-width is 768px just like its predecessors, even though its actual screen resolution is 1536px x 2048px. In general width is more versatile when it comes to creating responsive webpages, though device-width is useful when you wish to specifically target mobile devices (and not desktops with a small browser window for example), as rarely do desktops have screen resolutions below a certain number such as 320px x 480px.