I've visited a few sites on my iPhone/iPad which have prompted me to install the native app the first time I've visited the site. Is there a standard script somewhere that people use for this or should I just create my own? This must have been thousands of times before but despite endless googling I can't find a 'stock' script I can use. Ideally it should use cookies so the user doesn't get prompted more than once a month or so.
Apple have actually got a built in way of doing this relatively unobtrusively, which adds a "Smart App Banner" at the top of the browser if the app isn't already installed:
To add a Smart App Banner to your website, include the following meta tag in the head of each page where you'd like the banner to appear:
<meta name="apple-itunes-app" content="app-id=myAppStoreID">
For more options, please see the full documentation on Apple's site:
http://developer.apple.com/library/ios/#documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html
This adds a nice looking banner to the top of the page, which can be dismissed by clicking a close button. Unlike a popup (alert box), it doesn't obscure the page too much or stall it from loading and goes directly to the app store page for your app when clicked. I think this is probably the best solution for most cases.
As it only involves adding one meta tag, it's also easier to implement than any other JavaScript based solution and there's no risk of it appearing on non iOS devices.
Caveat: Only works in Safari. Not Chrome etc.
I'll assume that they're checking if the device is iOS via the HTTP_USER_AGENT
<?php
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$droid = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
if ($iPod || $iPhone || $iPad){
// Display Prompt for iOS
} else if($droid){
// Display Prompt for Android
}
Related
When clicking a website link from within the Facebook iOS app, the page loads fine (within the in-app browser). But then when you scroll down and then back up, the top is cut off. This is a problem for website with a nav bar at the top, like amazon.com. Is there a workaround for this? One that does not involve the user having to disable the in-app browser. This is aweful when you realize you've spent money sending people to a website they cannot use.
Update: This seems to be an issue with a slightly older version of the Facebook App for iOS. In the newer version of the FB App, this is not a problem.
Even still, I'd like to know if anyone has experienced this and if so, is there an HTML, javascript or jquery solution to the problem. I know I can detect the FB browser, maybe even the version of the in-app browser. But still, what to do then.
I think I am going to try using frames. I guess I could pad the top and bottom.enter image description here
So if you visit http://movableink.com/ on Safari on iOS9.
Then click in the header on http://movableink.com/partners
On first visit or slower connections the entire page renders blank in safari.
This is a pretty standard page. There's no specific code to call out that might be causing this. This is a new page with a different css file, it's the first responsive page.
However, the text and content is selectable (but not here) and also if I check it out in the Safari developer inspector when the phone is plugged into a mac there is also nothing notable covering the page.
You may want to look in private browsing, you will want to open up the homepage first and then click on 'Partners'.
What could possibly be causeing this issue of the page disappearing?
I could reproduce this on my iOS 9 device very well if there was an ad blocker active (in my case: Crystal and Lionz). Without this ad blocker active the page was loading smoothly without a blank screen.
By using another ad blocker (e. g. 1Blocker) the page is also running smoothly.
For me the problem is only related to certain ad blocker apps on iOS.
I did some tests, it could be just request timing issues due to either un-optimised server code (like regenerating the whole site stack every first request from a client), or generating CSS.
On first load it is consistently 700ms, regardless of mobile or desktop. Safari will be more sensitive on the mobile as it processes not as many parallel resources after it has a list of url's to get.
If you are using a CMS, check for Optimising / Caching solutions in built into the system and switch that on, see if it changes the load times.
Another alternative is Cloud distributed CDN's such as Cloud Flare (free for basic, other plans for more intensive).
I recently developed a website that fetches mixed http/https content. Due to this, I always get the address bar displayed on top (It doesn't auto-hide like in other websites). Here's what I'm talking about:
This is the link to the website.
The content is fetched from various sources, hence filtering non-https content is not possible. And since the website is meant for reading, a non-full-screen display is painful for the reader. So, is there a way to force the auto-hide behavior?
PS: The website uses Twitter Bootstrap, if it helps.
PPS: I don't want to use the full-screen API, it'll be too heavy for this.
Check this has everything you need
http://www.html5rocks.com/en/mobile/fullscreen/
The Chrome team has recently implemented a feature that tells the browser to launch the page fullscreen when the user has added it to the home screen. It is similar to the iOS Safari model.
<meta name="mobile-web-app-capable" content="yes">
window.scrollTo(0,1);
this will help you but this javascript is may not work in all browsers
For a friend I'm creating a narrowcasting (well, not really, just to one screen) page which reads content from his webshop and shows a slideshow with highlighted items, together with his logo and the time.
To run this I'm using an Android 4.1 device with a screen, I've installed Chrome onto the device which works properly. Everything is going pretty good so far, there's just one thing that annoys me. As we speak I'm using the Fullscreen API to go fullscreen as soon as the user presses the enter key. But due to changing content I want to do a refresh once in a while to fetch new content.
Here's where the problem lies: once the page refreshes it leaves fullscreen mode. I have been looking for settings in Chrome Android to allow fullscreen mode without a mouseclick or keydown event but haven't succeeded so far. Is there any way I can get the result I want (going fullscreen without a click of keydown)?
The reason I'm using Chrome Android is because this browser gave the best HTML5 support (for future use) and the best resolution (1280x720). But it's lacking a fullscreen mode I can use from within the browser. I tried Firefox for Android with a fullscreen plugin, that worked perfectly (not leaving fullscreen when refreshing), but Firefox only gave me a 960x520 viewport which is pretty small.
There's just one thing that comes up in my mind for now, which is doing an AJAX request to fetch the new content and replace the pages HTML with the fetched HTML (or perhaps just the 'slides' container).
Thanks for thinking along!
This code will do the same thing as refreshing the page automatically. I'm not sure if it'll prevent you from exiting fullscreen because I don't have a working copy to mess around with.
$.ajax() //Get the current page
.done(function(msg) {
document.documentElement.innerHTML = msg;
});
I don't recommend doing somthing like this, however. Your best bet is to abstract the part of the page that needs to be updated to it's own page, ie:
$.ajax("http://example.com/get_next_element")
.done(function(msg) {
$("selector_for_fullscreen_element").html(msg);
});
I'm trying to find out answer to my problem, but Google and other sites can't help me.
I'm building mobile website and I need redirect to homepage where browser is reactivated (unlock screen or open from minimalized). Is it possible?
Thanks a lot
Maybe you can do something with window.onunload event
No in short,
There is no specified way to detect a lock screen as such there is nothing in HTML / Javascript.
However you could use PhoneGap and create a mobile application,
I have a class to make events in PhoneGap easy
then you can use Application paused if you still want your application to only work online you can use an AJAX loader to load the content as using PhoneGap dose not hit the Cross-Origin domain policies of JavaScript normally
This i think is the only alternative you can use and it would require quite a bit of work to make your site become a mobile application.
EDIT:
Sorry a bit of Detail. PhoneGap allows you to build mobile applications HTML, CSS & JavaScript and provides some new events into JavaScript to help with mobile applications as well as the ability to call upon the hardware of a phone you can find more out at
http://phonegap.com/
Another Thought:
Thanks to #jeroenk for this idea it just came to me after reading his you might be able to do a little hack fix.
on your page
window.timestamp = Math.round(new Date().getTime()/1000);
setInterval(4000, function(){
var curTime = Math.round(new Date().getTime()/1000);
if(curTime > window.timestamp+5){
// do redirect
}
window.timestamp = Math.round(new Date().getTime()/1000);
});
I'm not 100% but i think Javascript gets halted when the browser on a mobile is not open, so lock screen on minimized so the above will check every 4 seconds that the Javascript has not become out of sink in (allowing for 1 second extra in case there is an application lag it would take some one more than 1 second to get though lock screen unless it was the user using the phone so it was not put down)
As i say this is a thought it might not work.