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
- 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 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 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.
Clifford P 9:37 pm on August 1, 2012 Permalink
Hi Mark. Great topic! I wrote this article not too long ago: http://wpmu.org/wordpress-retina/ Good article.
Russell Jamieson 10:05 pm on August 1, 2012 Permalink
Many Thanks Mark, you saved me $3k on replacing by MacBook and gave me some more good reasons to upgrade to Mountain Lion and ditch my 24 inch monitor.
Russell
PS
My new motto for WordPress themes and plugins is:
If it ain’t responsive, it’s dead!
Pete Schuster 10:49 am on August 7, 2012 Permalink
If you’re installing Xcode you can also check out retina elements with the iPhone (retina) and iPad(retina) selections in the device options in the simulator app. It’s not going to give you full screen, but you can check your dpi media queries.