Use of Merges in phonegap application

Posted By : Avilash Choudhary | 31-Dec-2015

You can use one base code to create applications for all platforms Cordova supports. For example it is common android UI design to have tabs on top of app,while on iOS tab will be on bottom.Given that you have one www folder within a Cordova Project.

Easier solution is to use merges folder. This folder doesn’t exist by default.Simply create new folder called merges at root of your project

Cordova1

 

 

 

 

 

 

 

 

 

Inside folder you create new directory for each platform i.e. suppose for one Android and other one iOS  you want to customize

Cordova2
 

Listing 1 Application home page (merges_test/www/index.html)


 
#1 #2

Hello World

Hello folks!

#1 Default CSS for all platforms. #2 A specific CSS file for a platform

/* Apply to all */
h1 {
   font-family: sans-serif;
}

p {
   font-family: sans-serif;
   color: black;
}

Here is platform.css:

Listing 3 Default platform CSS file (merges_test/www/css/platform.css)

Cordova3

 

 

 

Listing 4 Android modified CSS (merges_test/merges/android/css/platform.css)

 
 body {
   background-color: aquamarine;
}

p {
   font-family: sans-serif;
   color: black;
   font-size: 40px;
   font-style: italic;

 

While running application on both iOS and Android you can see difference in below figure

 

Cordova4

About Author

Author Image
Avilash Choudhary

Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.

Request for Proposal

Name is required

Comment is required

Sending message..