Simulate responsive web content on Apple devices
Use Responsive Design Mode to simulate how your website appears on other screen sizes and Apple devices, such as iPhone and iPad.
Choose Develop > Enter Responsive Design Mode.
If you don’t see the Develop menu in the menu bar, choose Safari > Preferences, click Advanced, then select “Show Develop menu in menu bar.”
Click a device at the top of the page.
Click the device multiple times to switch between landscape and portrait orientation. For iPad, click multiple times to see each Split View and try out common side-by-side configurations. The values at the top of the page (left to right) show:
Viewport size: Shows the dimensions of the selected device and the scaling that fits your display. Any scaling less than 100% is sized to fit the Safari window. To change the size, drag one of the semi-transparent handles that appear outside the borders of the viewport.
Device pixel ratio: Shows the ratio of device pixels to CSS pixels. For example, 2x is 4 device pixels per CSS pixel, which is the ratio used on Retina devices. A larger ratio provides a sharper view. To change the ratio, click the pop-up menu.
User Agent: Shows the header included with outgoing HTTP requests. The header includes information such as the browser type, browser version, and device operating system. To change the User Agent, click the pop-up menu.