Titanium Tips

iPad Dimensions - Landscape

Size of the standard iPad User Interface (UI) elements in Landscape orientation.

iPad Dimensions Landscape

The good thing about the iPad (so far) is that there is no Retina display to worry about - so no @2x images are required.

If you want an image to fill the Main Content Area, it needs to be 1024 pixels wide by 655 pixels high.

In case you can’t make sense of the graphic...
iPad Landscape Width 1024px
iPad Landscape Height 768px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 655px
Tab Bar Height 49px
   
Keyboard Height 352px
iPad Landscape Keyboard Size 352px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPad Dimensions - Portrait

Here’s the size of the standard iPad User Interface (UI) elements. You know, the Status Bar, Nav Bar, Tab Bar, etc.

iPad Dimensions Portrait

The good thing about the iPad (so far) is that there is no Retina display to worry about - so no @2x images are required.

If you want an image to fill the Main Content Area, it needs to be 768 pixels wide by 911 pixels high.

In case you can’t make sense of the graphic...
iPad Portrait Width 768px
iPad Portrait Height 1024px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 911px
Tab Bar Height 49px
   
Keyboard Height 264px
iPad Portrait Keyboard Size 264px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPhone Dimensions - Landscape

The iPhone in landscape orientation has one special exception to the standard sizes of iOS User Interface (UI) elements. The Nav Bar is usually 44px high, but in this case it’s 32px high.

Here are all the dimensions...

iPhone Landscape Dimensions

If you want an image to fill the Main Content Area, it needs to be 480 pixels wide by 219 pixels high.

Note: these measurements are for standard, non-Retina displays. Titanium uses these measurements regardless of what devices you are working with. If you want to support the Retina display, you just have to include doubled versions of your images.

For example...
File Name Display Type Dimensions
"image.png" Standard 480x219 pixels
"image@2x.png" Retina 960x438 pixels


In case you can’t make sense of the graphic...
iPhone Landscape Width 480px
iPhone Landscape Height 320px
   
Status Bar Height 20px
Nav Bar Height 32px
Main Content Area Height 219px
Tab Bar Height 49px
   
Keyboard Height 162px
iPhone Landscape Keyboard Size 162px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

iPhone Dimensions - Portrait

It’s often handy to know the size of the standard iPhone User Interface (UI) elements.
You know, the Status Bar, Nav Bar, Tab Bar, etc.

Here you go...

iPhone Dimensions (Sizes) - Portrait

So, if you want an image to fill the Main Content Area, it needs to be 320 pixels wide by 367 pixels high.

Note: these measurements are for standard, non-Retina displays. Titanium uses these measurements regardless of what devices you are working with. If you want to support the Retina display, you just have to include doubled versions of your images.

For example...

File Name Display Type Dimensions
"image.png" Standard 320x367 pixels
"image@2x.png" Retina 640x734 pixels


In case you can’t make sense of the graphic...
iPhone Portrait Width 320px
iPhone Portrait Height 480px
   
Status Bar Height 20px
Nav Bar Height 44px
Main Content Area Height 367px
Tab Bar Height 49px
   
Keyboard Height 216px
iPhone Portrait Keyboard Size 216px

Note that when the keyboard is displayed, it covers up the Tab Bar at the bottom of the screen.

Comments

Tab Bar Icons

Close-up of a tab bar based app
If you're making a standard iPhone or iPad app that uses a tab bar, then you are likely to need some icons for that tab bar at some point or other.

The tab bar is the bottom strip along the base of the iPhone screen that includes nice icons to tap on. When you create a new iPhone or iPad app using Titanium Mobile, it automatically creates an app with a tab bar and two different tabs.

Read on to learn how to create a tab bar with custom icons or in-built system icons... Read More...
Comments