Select Page

Ipod, iPhone, iPad Add to Home Screen for Joomla! CMS version 1.6.1

Ipod, iPhone, iPad Add to Home Screen for Joomla! CMS version 1.6.1

This small plugin for #Joomla! add a message inviting iPhone/iPad users to add the web application to the home screen. It also optimize your site by adding all meta that are recognized by Apple iOS browser: authorize resize, screen ratio, startup picture, web app optimize rendering and much more.

add2Home_ipod_iphone_ipad_joomla_001 add2Home_ipod_iphone_ipad_joomla_002

The new version introduce

  • A better administrator panel
  • The same codebase for #Joomla! 1.5 and 1.7
  • A lot of new features, see below


Custom Startup images

Specifying a startup image is available in iOS 3.0 and later. On iOS, similar to native applications, you can specify a startup image that is displayed while your website application launches. This is especially useful when your web application is offline. By default, a screenshot of the web application the last time it was launched is used.

Custom Messages

It is possible to override the default message to invite user to add your site to their home screen. In order to be able to support all your visitor locales, you’ll have to edit manually the file /media/plg_system_add2home/add2home.js


Use the viewport meta key to improve the presentation of your web content on iOS. Typically, you use the viewport meta tag to set the width and initial scale of the viewport.
For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an Safari on iOS-specific web application, you should set the width to the width of the device.
“email” describes the properties supported by the viewport meta key and their default values. When providing multiple properties for the viewport meta key, you should use a comma-delimited list of assignment statements.
When referring to the dimensions of a device, you should use the constants described in “number” instead of hard-coding specific numeric values. For example, use device-width instead of 320 for the width, and device-height instead of 480 for the height in portrait orientation.


The documentation is also now part of this release.

The demo stages have been updated

Thanks to PMZ Web Design for the testing and feedback.

About The Author

Cédric Walter

I worked with various Insurances companies across Switzerland on online applications handling billion premium volumes. I love to continuously spark my creativity in many different and challenging open-source projects fueled by my great passion for innovation and blockchain technology.In my technical role as a senior software engineer and Blockchain consultant, I help to define and implement innovative solutions in the scope of both blockchain and traditional products, solutions, and services. I can support the full spectrum of software development activities, starting from analyzing ideas and business cases and up to the production deployment of the solutions.I'm the Founder and CEO of Disruptr GmbH.