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
Inside folder you create new directory for each platform i.e. suppose for one Android and other one iOS you want to customize
Listing 1 Application home page (merges_test/www/index.html)
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)
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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Avilash Choudhary
Avilash has excellent experience in developing mobile and web applications using jQuery , Javascript and PhoneGap. His hobbies are watching and playing cricket.