Documents – iPhone&iPad Compatibility with Dolphin App Template

For Dolphin App Template, the screen size is the only part you should pay attention with iPhone&iPad compatibility.

The screen size for iPhone (including Retina) in pixels is 360×480

The screen size for iPad in pixels is 768×1024

Device Option in XCode:Universal,iPhone and iPad. You can set the device type in XCode, then XCode will build app with the specified option.

Universal: this option allows your app to be installed on both iPhone and iPad, but it will not take response for screen size resize. (In Dolphin App, you can use <align> and <auto_screen_fit> tag in XML to set screen adjust re-size)

iPhone: allows your app to be installed on both iPhone only.

iPad: allows your app to be installed on both iPad only.

For simple image gallery/slideshow or single layer eBook

If you want to use Dolphin App Template to build image gallery/slideshow or simple one layer eBook (like the App – Attractions of Nanjing), this option is suitable for you.

With device option set to universal, <align> and <auto_screen_fit> for the global set in XML need to be set like below:

<!–align mode:v:portrait view, h:landscape view, g: both protrait view and landscape view–>
<align>g</align>
<!–when align mode is g:whether all ui to auto-adjust to fit the screen, recomand to set with 1–>

<auto_screen_fit>1</auto_screen_fit>

For multiple layer(image/video) eBook

Since iPhone/iPad screen size is not the same, even one App, you may want use different layout for iPhone and iPad individually. So, in such situation, you can use two xml, one xml for iPhone, and another xml for iPad.

With multiple layers, 2 issue you need pay attention to:

1. Portrait&Landscape View, when you set your app’s layout in one view, for example: portrait view, then you rotate your screen to landscape view, but your App has not set a layout with multiple layers in that view.In such situation, it means double of the layout workload if you want to use both portrait&landscape view with multiple layers.

In recent version, Dolphin App does not support two version of layout. But even many top level digital magazine app have only one type of view, like Our Choice , Oprah Magazine and Esquire. Since two version layout is not that necessity and time costing for creation.  So, if you do not want your page rotate when you use multiple layers, you need to set <align> with v or h, and <auto_screen_fit> to 0.

2. Page fit screen function, with new argument <fit_page_size>(Released 7/23/2011), it released the power that whole page fit with the screen size, check the demo video:

 

For fit screen function go to work, <align> need to be set to g,<auto_screen_fit> need to be set to 1, and <page_width> and <page_height> are also necessary:

<align>g</align>
<auto_screen_fit>1</auto_screen_fit>
<page_width>768</page_width>
<page_height>1024</page_height>
<fit_page_size>1</fit_page_size>

For <page_width> and <page_height>, they should be the same size with page size, in general, for ipad, it will be 768 x 1024 or 1024 x 768, for iphone, it will auto-fit the screen size with ipad page size ratio.

With these arguments, you can view your multiple layer content in both landscape and portrait view(fit with page size, keep ratio):

Sometimes, you still have specific needs, for example, you have a single image with size 1024 x 768, but your page size have been set with 768 x 1024. In such condition, when in a landscape view, your single wide image will limit width size to 768 (keep size ratio). If you still want to view that single wide image in landscape view with full size, you could set <fit_page_size> to 0 in that page’s <page_prop> tags, in such way, this single page will omit the global <fit_page_size> setting, like this:

<page_prop>
<fit_page_size>0</fit_page_size>
</page_prop>

 

Reference Tutorials&Articles

Multiple Layers Introduction http://handymood.com/blog/?p=88
Image Layer Introduction http://handymood.com/blog/?p=81
Video Layer Introduction http://handymood.com/blog/?p=94

This entry was posted in Documents - Dolphin App Template. Bookmark the permalink.

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=""> <strike> <strong>