How to make a mobile app so that it's UI will be compatible in maximum devices?

Question

I have idea about cordova. I am trying to use jQuery mobile framework but still not getting good result.

Answer 1

Note: Facebook uses User-Agent string to detect browser and open specific website as touch.facebook.com(for touch devices), www.facebook.com(other devices), m.facebook.com(for mobile devices). They have specific team to work on new/old/modified User-Agent-String, as new mobile launched or updated.

---

As it is too broad question so that, i am just giving my idea as a general-answer. This will help in understanding the concept of cross-device websites/web-applications:

Now days we have various type of devices like PCs, Tablets, Smart Phones, Feature Pones, Normal Phones etc. But main point to keep in mind is that our web-application will run on a browser AND on PC we can have a browser(or emulation to a browser by developer tool) which have low in feature. So main thing is that, we need to understand browsers.

So, As you know a browser can understand 3 languages: HTML, CSS and JavaScript.

Now, My idea is to create two website code, one for mobile[M] (only HTML) and second Responsive design[R] (bootstrap can be use). Next follow this strategy:

Set site M as default and add <script> tag with code of permanent-redirection to R site. If browser supports JavaScript then site R will handle everything else.

---

Points:

• If you think script code will be displayed on low-end-mobile for site M as simple-text, then you can use FONT tag to set font-size as zero. BTW, redirection code will be very less and this article shows there are 75% browsers supports Responsive website design today.

• If website redirects to site R that means its supports JavaScript. Now, if you want separate site for browser which dose not support Responsive Design(site R, BTW it will we displayed fine) you can look in to this stack overflow question to detect R support by JavaScript.