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:
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:
- Now bring up developers tools in Chrome and hit Toogle Device Toolbar icon (or CTRL + SHIFT + M shortcut)
- Go to the device dropdown and click on Edit… on the bottom
- 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
- 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.