JqueryMobile Splash page for non-mobile - javascript

I´m using jquerymobile to build a simple mobile app and would like to know, whats the best way one should use to make a index page for non-mobile browsers when visiting the mobile app adress ?
I use index.html for now, and i can access it with any desktop browser, but i would want to restrict it to mobile only, and show a different page for desktop browsers.
Which approuch would be better?
Thank you!

In your index.html page you can include some detection script that detects the type of browser (it may be easier to use a whitelist of mobile devices rather then a blacklist of desktop browsers) and then redirects desktop browsers to something like index_desktop.html.
Sorry if the answer isn't as exact as you would have liked but I generally allow desktop browsers the ability to view my mobile pages (I just make sure there is a "View Desktop Version" link somewhere on the page.

Related

Javascript: how to open a url in Safari browser where as the application is running in Chrome?

I have a web application which is build to run on mobile devices with any browser. but there are two links which I want to open in specific browser which is say Safari.
I think this might be what you need - application:openURL:options:
I've only glanced at the doc but it seems you can choose a particular app to handle a URL.

How to detect if the site is loaded inside an iframe on a mobile device?

The website I'm developing recently uses Bootstrap framework. There is no problem about responsiveness while directly visiting the site.
There is another domain name (domainB) and I'm using URL embed method and it loads the actual site.
While visiting the domainB on a mobile device, the responsiveness doesn't work, it loads the desktop site not the mobile-size one.
So, my question:
How to detect if the site is loaded inside an iframe on a mobile device?
I saw that question and by that method it can be understood if the webpage is being loaded inside an iframe but how to detect if the visitor is on a mobile device?
(I don't have any code control on domainB, the URL embed feature is served by domain name registrar company.)
(There could be some SEO issues about this, I know this.)
You could use the mdetect.js script from MobileESP to check if the page is loaded on a mobile device. The method DetectMobileQuick() seems to do what you want, you can find an example here . As described on the MobileESP page, this approach may not work for older phones, including older BlackBerry, PalmOS, and Windows Mobile devices, that have poor support for Javascript. You may also want to check out this post that describes how you can use bootstrap to determine the size of the device view being used.
How to detect which device view you're on using Twitter Bootstrap API?

Come back to iPad Webapp after going to Mobile Safari

I'm creating an RSS Reader Web app for iPad. In my application, there is a button that opens the URL of each article in Mobile Safari (with target="_blank" method)
But the problem is, after user goes to Mobile Safari from my web app, and then closes Mobile Safari, iPad goes to the home page. but it should come back to my web app.
I tried to implement an in-app browser in my web app with iframes, but there is too much problems with it. many sites does not allow users to open their website inside an iframe, also there are some problems with implementing back button for the iframe, you can read the problem here.
What is the best way for my purpose? Is there any way to come back to web app after closing Mobile Safari? If not, what should I do? Is it possible to solve in-app browser problems? How?
If you're using phonegap (which it sounds like you are), I would suggest the InAppBrowser or ChildBrowser plugin

Redirecting to the mobile website

I have coded few lines of java script code. But I am not sure that it is correct or not.
Few months back I published a desktop version website. but when a user coming through a mobile (like android, iPhone or may be windows phone), I want to redirect a new path. Here is the code:
// JavaScript Document
var uAgent = navigator.userAgent.toLowerCase();
if(uAgent.indexOf("android") > -1 || uAgent.indexOf("iphone") > -1 || uAgent.indexOf("windows phone") > -1) {
window.location = "http://website path will come here.";
}
Is it the correct code?
That will work, but its not a great way to do this for a couple of reasons:
Users with JavaScript disabled will not get redirected
Mobile users (some with slow browsers and tight bandwidth limits) will download your desktop page before being redirected to the mobile site.
A better approach if possible, would be to manage this via the web server configuration ideally without any redirects at all. Alternatively, consider serving the same content to all users and changing the layout with media queries.
If you really need to detect a mobile browser (instead of making a mobile-friendly responsive layout like the Responsive template on Initializr that Just Works on mobile browsers - Google for "mobile first" and "responsive design" for more examples) then take a look at these links:
Detect Mobile Browsers
DetectRight
DeviceAtlas
WURFL - Wireless Universal Resource File
Mobile Device Browser File
There are tons of mobile browsers - not only iPhone, Android and Windows - so if you are going to detect them then you need to do it right. See also the jQuery Mobile, a great mobile framework that will make your life easier.
uAgent.indexOf("android") > -1
Android is not just an operating system for smartphones. It also runs on a lot of tablets which can easily handle the desktop-optimized versions of most websites. A friend of mine just complained that some websites only serve the mobile version to his GalaxyTab, even though the normal version would look well on his 10.1" screen.
You also forgot about blackberry and symbian phones.

Launch mobile Safari from UIWebView *without* modifying app source?

I'm developing a small site that will only be viewed in-app inside a UIWebView, and one page has several links to an external website. I'd like these to open in mobile Safari, but all links inside the app load within the webview. Modifying the source of the app isn't an option since the site needs to be live before any changes could be submitted.
Is there a way to force a link inside a UIWebView to launch mobile Safari using HTML/5 or Javascript? Mimic shouldStartLoadWithRequest? Sneaky, hacky workarounds or brilliant alternate solutions?
(And, out of sheer curiosity... why not?)
It would be bad design to let sites access the frameworks on the iPhone via simple HTML. This would open up all sorts of security holes. Its not web behavior you want to alter, so I think you may need to change the app source. I still don't understand why that isn't an option. Could you go into more depth?
One option would be to add a custom URL handler. Your website could then determine if the "broswer" is the app and serve custom URLs for those links you'd like to maintain (aka open) in your app. Then, any standard HTTP/s URLs would open in Mobile Safari.
In other words, have your web server provide urls like myappurl:// for the links you'd like your app to handle, and http:// which would open Mobile Safari.

Categories