Safari’s Responsive Design Mode
You can view the web page easily as it displays on a range of iOS devices, as well as other browser resolutions, by clicking the icons above the page display. You can also choose the user agent (which web browser is being emulated), and choose to view your assets in 1x, 2x, or 3x.
This sounded great, but I thought it would actually preview what the page looks like on the various devices, and it doesn’t do that. Rather than show the page as the selected device would display it, it seems to just force the page to the given device width, ignoring any viewport that you’ve set. In other words, it’s like it always uses width=device-width even if that’s not what your HTML says.
Even then, the display doesn’t always match what I see on my iPhone. For example, on the September archive page the Mac shows the gray box for the date at full width (with a slight margin on either side), but the actual iPhone 6s shows a large (and undesirable) margin on the right side of the entire page.
See also WWDC 2015 session 505 (video, PDF).
Update (2015-10-04): @chucker pointed out the source of the margin problem, and I fixed it by setting code and heading tags to word-wrap: break-word when the width is narrow. The iOS simulator is more accurate at previewing.
Update (2015-10-06): Casey Liss notes that you can click on the iOS device icons to preview different rotations and multitasking modes.
Update (2015-10-08): Dr. Drang:
Not exactly a faithful representation. And it’s no better in landscape.
