How to emulate iPhone 7 in Chrome developer tools to debug a WordPress theme


DevTools comes with a powerful feature for developing mobile friendly pages. Unfortunately Google Chrome updates have not yet followed the latest mobile releases: Chrome’s developer tools is not showing the latest Apple iPhone 7 models to be selectable when in responsive design view. However you can do a little manual setup to have the latest Apple iPhone 7 models available in the list so you can preview and debug the layout of Wordpress themes.

First of all you need to know the official screen sizes and resolutions o iPhone 7:

iPhone 7

Screen size: 4.7 inch

Screen resolution: 1334 x 750 pixel

iPhone 7 Plus

Screen size: 5.5 inch

Screen resolution: 1920 x 1080 pixel

How to setup Chrome dev tools in 4 easy steps to show iPhone 7 screen resolutions:

  1. Now bring up developers tools in Chrome and hit Toogle Device Toolbar icon (or CTRL + SHIFT + M shortcut)
  2. Go to the device dropdown and click on Edit… on the bottom
  3. Then you click on “Add custom device…” and you enter the name (iPhone 7) and the resolution (750 x 1334) of the mobile device, then hit “Add” button
  4. Repeat the same process with the details of iPhone 7 Plus and you are done. Ready to view your WordPress theme emulation the brand new iPhone 7 and start fixing those CSS bugs!

Hope you find this helpful. We are pretty sure that Chrome updates will soon follow up with a native inclusion of the newest iPhone model, until then I hope you can use this trick as temporary fix.


There is 1 comment

Add yours
  1. Robert Paul

    Hey there, what you’ve shared here about creating iphone 7 previews in the chrome dev tools is not quite right.

    There is a difference between display resolution pixels and CSS development pixels.

    Yes, the iphone 7 has 1334 x 750 pixel resolution, but that is display pixels, not the pixels you reference in css development. Regardless of screen resolution, all displays use the same “CSS pixels” and translate accordingly. No one has the account for differing pixels per inch, that math is computed in the browser view automatically.

    To further illustrate, the iphone 6 and iphone 7 have the same screen quality, having 1334 x 750 pixel resolution by apple, but in chrome dev tools, they state the display of the iphone 6 as 375 X 667, which is the iphone 6’s true CSS pixel width and height.

    If someone wants to debug for iphone 7 displays, they would just keep using the iphone 6 width and height parameters in chrome dev tools.

Comments are closed.