Convert iPhone app to iPad app    
This topic is assigned to Victor

Aug 19, 2011 02:47 AM

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.

Device

Screen size

Portrait

Landscape

iPhone/iPod

320 x 480 pixels

480 x 320 pixels

iPad

768 x 1024 pixels

1024 x 768 pixels

You may try to convert every page to their own type. SC 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 ):

1body
2{
3
4width:768px
5

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


Images

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:

1body
2{
3
4background-repeat: repeat;
5

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:

1body
2{
3
4background-repeat: repeat-y;
5


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".

Ex. BEFORE:

1<iframe frameborder="0" onload="RssTableResize();"id="rsstable" width="320" scrolling="no"src="http://seattleclouds.com/myapplications/dedmakar/AppCool/
2headlines.ashx?rssurl=http%3A%2F%2Fblog.seattleclouds.com%2Ffeed%2F" style="height: 1132px; "></iframe>

Ex AFTER:

1<iframe frameborder="0" onload="RssTableResize();" id="rsstable"width="768" scrolling="no"src="http://seattleclouds.com/myapplications/dedmakar/AppCoolVersioniPad
2/headlinesiPad.ashx?rssurl=http%3A%2F%2Fblog.seattleclouds.com%2Ffeed% 2F" style="height: 1132px; "></iframe>
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.



Aug 19, 2011 09:59 AM
Thank you for that!!


Aug 22, 2011 05:16 AM
does that still count as one of your apps for the month, when you copy it like that?


Aug 22, 2011 05:22 AM
Each application (regardless the platform) that you add to your subscription plan in order to be published counts as a separate application.


Aug 22, 2011 01:18 PM
Wow, thank you SC for this information. It would be nice to do something like this for all your new items, templates you add. This would help with a lot of frustration and back and forth questions. 


Apr 21, 2012 03:48 PM
Am I the only one having problems converting from iPhone to iPad? Many times these the instructions don't work. There are too many you "may" do this or that. Some pages are not allowing me access to the html side.

Currently trying to convert the iPhone Travel App to and iPad. Changed width in style.css, some pages appear okay in simulator but on iPad it is iPhone size.

Frustrating, please advise what's going on and why I cannot access html. This is not the first app that this has happened.


Apr 25, 2012 08:49 AM
In the meanwhile some templates (including page types and relevant styles) have been updated. If you are using an older template then style.css will have to be updated with new style classes. This takes place when you convert page to same type or create new page of same type. 
Detailed info on this post 

Some classes like for instance iimage will have to be removed from style.css of your iPad app or edited accordingly (320px to 768px). 
.iimage
{
max-width:320px;
width: expression(this.width > 320 ? 320: true);
}

Parameters set inside html will have to be altered manually. For instance changing width from 320 to 758 (100%), or excluding width parameter.

Consider using a template for iPad to start your app, then sync content to it from the iPhone app. Of course, in this case, style.css file should not be overwritten in the new iPad app with the style.css from the iPhone project. 


Aug 08, 2012 08:27 AM
Great discussion here guys.  I have benefitted a bunch from it, as I am in the process of converting a iPhone App into an iPad App.
My question, though, revolves around the submission process.
If I already have an iPhone App approved by Apple, and I am now duplicating the App for iPad, how would you say the submission process is treated?
Do I have to submit the App again as if it were a brand new one?
Thanks.


Aug 24, 2012 03:55 AM
Hi Marcos,

Yes, if you duplicated your Application for iPad, you need to submit again as a new App.

Thank You


Nov 03, 2012 04:24 PM
I have the same dilemma as above. I have an app in the store and have made an iPad version of it.mwhen I am in iTunes Connect it is still asking me to upload screenshots for the iPhone. I was hoping to keep my original app in the store and add only an iPad app. 

A little clarification would be appreciated. I just don't want to submit my iPad app and have it go to both markets.

Thank you.


Nov 04, 2012 09:32 PM
Does this work the same for conversion from an iphone app to kindle fire?  I wanted to try & convert my app to kindle fire but the screen only takes up 1/2 of the screen on the demo version.  Thanks in advance,
Jennifer


Nov 06, 2012 10:09 AM
Jennifer,


Yes this will work for Kindle Fire. Note that you will have to make some adjustments to HTML Pages. You will need to change the width. Try to set the width:100%;

Jesse,


If the App you have made is for iPad, you do not have to upload screenshots for iPhone. Just upload screenshots for iPad.


best regards,
Victor.


May 04, 2015 05:31 PM
Hi

Would it be easier to just start over and create the app from scratch for the iPad? If I start from scratch will the templates automatically be sized correctly for the iPad?


May 05, 2015 08:47 AM
Kathryn,


It will be easier if the iPad App is created from scratch. Most of the pages will be automatically resized for iPad screen.

Victor,
SC Team.

    1