Most of the web developers use phonegap to develop apps for mobile. Phonegap is the most powerful platform available for web developers to develop mobile apps. Its features can be extended using plugins which makes it even much powerful. But one thing phonegap lacks is that the look and feel of native app. In this post we will look the the different way by which you can make a phonegap look and fell like a native app.
Making app screen fixed
The screen of a phonegap app can be pulled which makes it feel more like web app. To make it stay fixed we need to disable over scroll.
Web apps allow users to copy text from a web page and paste it somewhere else. But copying text from non input elements makes it feel less like a native app. We need to allow the copy and paste of text only for input elements. This can be done by the below css style
-webkit-user-select: auto !important;
-khtml-user-select: auto !important;
-moz-user-select: auto !important;
-ms-user-select: auto !important;
user-select: auto !important;
Anchor element popout
When we press hold an anchor element we see a popout. We need to disable it as phonegap app is a single page app not a multiple page app. This can be done by the below css style
Dragging of elements
Elements in a webpage can be dragged by holding and moving it. We need to disable this feature to make our app feel more like an native app. This can be done by the below css style
When user double clicks on the app screen the web page is zoomed or even when the users zooms using two fingers. We need to disable it to make it feel it a native app. This can be done by adding this snippet to head section.
user-scalable=no doesn't allow users to zoom
initial-scale=1 means the zoom level when the app is loaded. 1=100%
maximum-scale=1 means the max zoom level user can zoom
minimum-scale-1 means the min zoom level user can zoom
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
Height and Width of Website
Mobile browsers usually assume that webpages are not optimized to be displayed in small mobile screens and thus virtualize the viewport to be wider than screen width (viewport width equals to 980px). This virtualization will effect mobile optimized web pages (responsive pages). We can customize the virtualization like this
<meta name="viewport" content="width=device-width, height=device-height" />
CSS Pixels vs Device Pixels
Some browsers on some devices (mostly High-DPI android devices or retina displays) don’t make CSS Pixels same as Device Pixels when width of viewport is set to device width. They make 1 CSS Pixel equal to around 1.5 Device Pixel. Which means images, fonts and other things are zoomed by 150%.
This default configuration mostly effects images and fonts as they are zoomed they loose quality. There are basically three solutions to this problem:
1. We can make viewport width same as device width with in terms of pixels and then using responsive media queries supply different images and font size according to the resolution.
2. We can also include a high-resolution image and fonts in web page but constrain their width according to the design and layout of webpage. When this pages are viewed in High resolution mobile devices they will be zoomed but will not have quality loss as they are already high resolution.
<img src="image-600*600" style="height: 100px; width: 100px" />
3. Instead of providing high resolution images by default we can use Density DPI media queries to find the presence of this zooming configuration. And if this configuration exists then only provide high resolution images otherwise provide required resolution images. You can find more details on Density DPI media queries in this links. OperaSafari
Touch enabled mobile devices delay in firing click event (touch event) by 300ms. This is done to wait for second click which will result in zooming of web page. This delay will cause bad experience for the users of your phonegap application. Using a well known library called as fastclick we can remove this delay.
We need to make the UI of our phonegap app same as a native app. Its very difficult to achieve this kinds of UI by writing designing code from scratch. We can use one of the most popular library called as jQuery Mobile to achieve this interface. jQuery Mobile also lacks some features like smooth scrolling, pinch, carousel and pull to refresh. These UI features can be achieved using iScroll
There are many more things you can do to make your phonegap apps look and feel like native apps. The above mentioned methods are enough for any kinds of apps. Its always good to learn mobile web development before learning phonegap. If you like this post please “Like and share”.
These are some reference books which will help you to learn more about phonegap application development