Xcode Fix: Show the iPhone Simulator Skin on a Retina Display
/Update 2-22-15: Xcode 6 doesn't show the Simulator Skin anymore. You should use the .PSD documents from Apple instead.
My students get confused when they’re working on an iPhone app and they run the iOS Simulator and only see a rectangular screen. Contrary to popular belief, you don’t need to see the “iPhone skin” to make an iPhone app. You won’t see the skin if your working on iOS 7 apps, scaling the iOS Simulator to something other than 100%, or making iPad apps. There’s two options to get the iPhone Skin to work, and I’ll explain what the retina iPhone screen means.
Option 1: Turn Off Scaling
If you scale the size of the iPhone simulator to 50% or 75% the skin will not display. It’s not documented behavior. I believe that Apple did this because it prevents screenshots of iPhone apps that are blurry or distorted. If you need to take screenshots for marketing, Apple offers iOS device .PSD files for Photoshop that include the skin that you can use for promotional purposes.
iPhone 5S for marketing your apps.
Option 2: Get a Retina Display
On iOS 7 there are no non-retina iPhone’s that can run the OS. You’ll be targeting an iPhone 4, iPhone 4S, iPhone 5, or iPhone 5S as the minimum system requirements. Because of this new restriction, when you go to make your iPhone app, the screen that you’re going to see on your computer is going to be a retina iPhone screen. It’ll be a 1-to-1 pixel representation and it will be huge!
If you’re on a non-retina display (i.e. external monitor, Macbook Air, iMac, or older Macbook Pro) you will not see the “iPhone skin” Instead you’ll see one of two things. Either a popup window that looks like the dimensions of the screen, or you’ll see a strange black frame around a very large window.
What is a retina iPhone Screen?
There are a ton of pixels on a retina screen, it’s double the size of what the original iPhone shipped with, which was 480x320 pixels (height x width). To top it off, Apple launched a new iPhone 5 with even more pixels in the vertical direction. Here are the current iPhone screen sizes. Take a look at how big these iPhone screens look at full resolution.
- iPhone 4/4S: 960x640 pixels (height x width)
- iPhone 5: 1136x640 pixels (height x width)
iPhone 4 (3.5" retina screen)
iPhone 5 (4" retina screen)
Desktop Retina Screens
Mobile device screens have been far ahead of the desktop screen sizes since the first introduction of Apple’s retina display on the iPhone 4. At the time, the increase in pixel density was a huge upgrade and cutting edge. Now the mobile market has caught up, but pixel density on desktop displays is still behind. The retina Macbook Pro’s are one of the few options for a large (i.e. 15”) monitor, unless you’re willing to spend $3,500 on a 32” 4k display from Sharp.
Buying the Sharp 4k display won’t solve your desire for more pixels either. The graphics power required for a display of that size is enormous. To power a desktop sized retina monitor your computer needs a very, very fast graphics card. These graphics cards are expensive (and will be for the next several years). You’ll need a 2013+ Retina Macbook Pro or the new 2013+ Mac Pro to show all of the pixels on 4K monitors (3840x2160 pixels).
Retina Macbook Pro
The 15” retina display on my Macbook Pro has 2880x1800 pixels (width x height). That’s just enough pixels to display a retina version of the iPhone 5 Simulator. If you’re on the Macbook Pro 13” your resolution is 2560x1600 which is too small to display the retina iPhone 5 skin, but large enough to display the retina iPhone 4 skin.
- iPhone 4 Skin - 1488 x 792 (height x width)
- iPhone 5 Skin - 1668 x 828 (height x width)
iPhone 4 Skin - 1488 x 792 (height x width)
iPhone 5 Skin - 1668 x 828 (height x width)
Bug Fix: Multiple Monitors and the iPhone Skin
I’m on a Retina display, but I connect to an external display. When I move the iPhone Simulator between screens it doesn’t update to show the retina iPhone skin. In order to get it to redraw itself with the skin, you can just change the current device that you’re simulating. Toggle between the iPhone 4” and iPhone 3.5” screens from the Menu Bar.
Go to the Menu > Hardware > Device > iPhone Retina (4-inch)
You can also do this fix after you’ve detached from a non-retina display and are now back to just working off of your Retina Macbook display.
Connect
- Join my iPhone mailing list to keep learning how to make iPhone apps.
- For more structured learning, signup for my online iPhone app course.