2.3 How to convert an iPhone app to iPad app?

Converting iPhone app to iPad app implies duplicating the iPhone app and adjusting the content and coding of the resulting iPad app.


1) Duplicating app

In the Dashboard of your iPhone app find and click on the word/link Duplicate.




In the window that will pop up enter your new app's name and choose target from the list (iPad). Click on Duplicate button, then Done.




Your new iPad app will be listed on the Applications page.

Note that duplication of the application will output the same (small size) pages with content but for the new target, that is iPad.


2) Adjusting content

Since iPhone and iPad platforms have different sizes the content has to be adjusted in order to be displayed properly on the screen of the device.




You may try to convert every page to their own type. Creatusapps will automatically adjust page properties from iPhone to iPad. However converting pages will result in data loss as the content will be overwritten with that of the template page. So you might like to create new pages and fill in the content, as well as to adjust html code and css manually.


Native pages will look as they should on the device. If not, try to convert the page to the same type, or create a new page and copy content to it.



3) Examples

Html-based pages

Duplicated html won't look perfect. You may need to update your style.css (which defines width, height and alignment) in Design Properties. You may also need to update html code of the pages.

After duplicating pages you have to change width from 320px (specific for iPhone) to 768px (specific for iPad) within the “body” tag in style.css (Application Dashboard / Design Properties / edit style.css ):




Remark: If you create new pages, or convert, they will be sized to fit iPad screen.



Small images that look good on iPhone will be “stretched” on the iPad and look blur if not replaced with similar images of larger size to correspond to the size of iPad's screen.  

Background images (if Rotation enabled)

To ensure that the background is filled up you can use small images for “tiling” and edit the “body” tag in style.css, as follows:




Background image (if Rotation disabled)

If gradient image is used it should have the width of 768px and “body” tag should be edited as follows:




Menu pages

(when duplicated from iPhone app) may require editing in HTML mode:

1) change table width to 768px (from 320px)

2) change table items (<td>) to appropriate width


Remark: To have content stretch on the whole screen depending on either Portrait or Landscape orientation of the device, you will have to use % instead of fixed widths in pixels.


RSS pages

(when duplicated from iPhone app) may require editing in HTML mode:

Alter path from your iPhone app directory to your iPad directory 

(ex below, iPhone app directory "AppCool" and iPad app "AppCoolVersioniPad"),

Alter name of RSS reader from "headlines.aspx" to "headlinesiPad.aspx",

Also alter width of iframe tag from "320" to "768".


Avatar of CreaTusApps

CreaTusApps has written 103 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>