Safari for Mac: Simulate Apple devices in Safari

Simulate Apple devices in Safari

Use Responsive Design Mode to simulate how your website appears on other screen sizes and Apple devices, such as iPhone and iPad.

  1. 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.”

  2. Click a device at the top of the page.

    Safari Responsive Design mode, where you select a device to simulate, set viewport options, and test your website

    Click the device again to change the orientation. For iPad, click multiple times to see each Split View. 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.

Published Date: Mar 30, 2017
62% of people found this helpful.