You’re listing the number of pixels on the iPhone screens, but that’s not what the resolutions are. It mostly applies to text rendering.
iPhone 3 is 320×480, both in pixels and resolution.
iPhone 4 is 320×480 in resolution, but it uses 640×960 pixels to draw that.
iPhone 5 is 320×576 in resolution, but it uses 640×1152 pixels to draw that.
Basically, iPhone 4 and 5 use FOUR screen pixels to draw ONE resolution pixel. It’s a bit of a tricky concept to wrap your head around, but put it like this.
Let’s say the letter M on an iPhone 3 is drawn using 10 by 10 pixels. On screen it will look (say) 3mm by 3mm.
On an iPhone 4 and 5, it will still be 3mm by 3mm, but RENDERED with 20 by 20 pixels to make it look sharper.
This is done automatically, and does not need any adjustments in your code.
So when it comes to text, newer iPhones just use more pixels to make things look the same physical size.
A little different with images in sites. I think (and I’m not entirely sure about this), when it comes to images, newer iPhones keep using the number of pixels (not the same physical size). So a 200×200 image will look larger on an iPhone 3 (say, 4cm by 4cm) than on iPhone 4/5 (2cm by 2cm).
Anyways, large explanation that doesn’t matter much — what I’m trying to say is that the resolutions of the iPhone 4/5 are still 320×480 and 320×576, not the double amount of that (again, that’s just the number of technical pixels in the screen technology).
I say, get an iPhone 5, that should be enough most of the time, especially if you also test it in your actual desktop browser by resizing your screen.
Two words, “device agnostic”. Never design for devices, design for content. When you’re resizing your browser and the content starts to look jacked, make a breakpoint and fix it. RWD means the content is “fluid” all the way up and down – regardless of device.