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
- Click here and log in with your Apple developer account.
- Find “Graphics Tools for Xcode” (the latest version offered) and download the DMG.
- When the DMG opens, drag the contents somewhere (I put them in /Applications/Xcode Tools/).
- Launch the “Quartz Debug” app (this is the only one you need, so you can get rid of the other ones if you like).
- Press ⌘2 or go to Window > UI 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.
- Check the “Enable HiDPI display modes” checkbox.
- Log out of OS X (⇧⌘Q), then log back in.
- Pull up your Displays preferences pane ( > System Preferences > Displays).
- Check the “Scaled” radio button.
- Look for the highest resolution mode listed that says “(HiDPI)” after it, and select that.
- 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 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.