I’ve just encountered similar problems with my iPhone 6 Plus.
I’ve been modifying the CSS of TwentyThirteen via the JetPack ‘Edit CSS’ feature and after I got it all looking sweet on my desktop, I turned my attention to the iPhone.
Rather oddly, I thought, the images come out at less than half the width of the screen in portrait and landscape orientation. And it looks like the only reason anything else is wider is because of my (as yet) un-responsive modifications to widths.
I figured out the body is reporting 414 *pixels* wide, whereas the iPhone screen is 414 *points* wide @3x. The actual width in pixels is 1080 in portrait. I did a fairly accurate physical measurement of image width versus screen width with a ruler and the ratio is about 0.38. Coincidentally, 414/1080 is around the same value.
If I am understanding this correctly, the phone must be reporting a 414 pixel wide screen but rendering as for a 1080 pixel screen. (There’s more to it than that with the built in scaler from true @3x, but I think the concept suffices here without that.)
I wonder, then, if the issue is somehow in the use of the pixel-ratio media query. But at this point I am getting out of my depth! I would appreciate someone with a bit more understanding of how all this fits together could mull over what I’ve found.
Oh, and Mike, the way to debug an iPad (or iPhone) render is to do it on the device! On the device, in Settings > Safari > Advanced turn on Web Inspector. There are instructions there on how to do the inspection from desktop Safari with the device plugged in to the computer. I tried it on my Mac just now and it was pretty neat. You get the usual inspector window on the computer and as you run your mouse over the code blocks, the blue/green/orange boxes appear on the device. It’s pretty neat!