How to Develop for HiDPI (“Retina”) without a Retina MacBook Pro

We’re working on HiDPI (“Retina”) support for WordPress. Of course, most people don’t have a Retina MacBook Pro at their disposal. So here’s how OS X-using WordPress developers can do HiDPI development without dropping $3,000 US on a laptop.

What you need

• OS X 10.8 Mountain Lion
• A monitor, with a resolution of at least 2048×1536 (probably just 27- and 30-inch monitors)
• An Apple developer account

Steps to enable HiDPI mode

1. Click here and log in with your Apple developer account.
2. Find “Graphics Tools for Xcode” (the latest version offered) and download the DMG.
3. When the DMG opens, drag the contents somewhere (I put them in /Applications/Xcode Tools/).
4. Launch the “Quartz Debug” app (this is the only one you need, so you can get rid of the other ones if you like).
5. Press ⌘2 or go to Window > UIUI UI is an acronym for User Interface - the layout of the page the user interacts with. Think ‘how are they doing that’ and less about what they are doing. Resolution.
6. Check the “Enable HiDPI display modes” checkbox.
7. Log out of OS X (⇧⌘Q), then log back in.
8. Pull up your Displays preferences pane ( > System Preferences > Displays).
9. Check the “Scaled” radio button.
10. Look for the highest resolution mode listed that says “(HiDPI)” after it, and select that.
11. Lean way, way, way back in your chair and apply a saline solution to your eyeballs.

You can now use Safari 6+ or Chrome 21+ to view your WordPress development siteDevelopment Site You can keep a copy of your live site in a separate environment. Maintaining a development site is a good practice that can let you make any changes and test them without affecting the live/production environment. and do HiDPI development. Note that while you can do this with lower resolution screens, I’m not sure I’d recommend it — it’d be very cramped.

#development, #hidpi, #retina