AMPEDUPDESIGNS

CONSULTING CONCEPTS PERSONAL

A small blog.

How to deeplink your app from web for both iOS and Android devices


You've created an app, and you've done the work to make it accessible via deeplinking patterns on iOS or Android,now how do you deeplink from your website, and how do you redirect to the app-store if your app doesn't exist on the user's device? Here is the way I did it with a brief explanation:

iOS


function launchiOSApp(url) {
var appleAppStoreLink = 'https://itunes.apple.com/us/app/MY-APP/APPID';
var now = new Date().valueOf();
setTimeout(function () {
if (new Date().valueOf() - now > 500) return;
window.location = app ...
Read More ...
Tags:   deeplinking  android  ios  appstore  google play store  

Getting rid of the blue highlight on focus around input boxes on iOS Safari Mobile


When you focus on an input element in iOS, a blue highlight shadow displays when the input field comes into focus.  Searching high and low, the common answer to disable this seems to be by setting the outline:0 in css on focus like:


input:focus {
    outline:0;
}

It didn't work for me.  What else do you need?  Turn off the box shadowing that iOS also adds like this:


input:focus {
   outline:0;
   box-shadow:0;
   -webkit-box-shadow:0;
   -moz-box-shadow:0;
}

Hope that helps!

 
...
Read More ...
Tags:   focus  blue highlight  ios  safari mobile  

Event Delegation in iOS Safari - Event Bubbling Safari Quirk


A recent quirk I found with coding for iOS Safari Mobile using event delegation and bubbling in Javascript:

In some cases you may want to perform some event bubbling so that when triggering an event on a DOM element, that event bubbles up to a parent element where you can capture and decide how to react on that event.  This is useful if you are capturing events on DOM elements NOT yet present in the DOM on page load, but later inserted into the DOM by some JS you are running.

In my instance, I was running a search autocomplete pulling results from an externa ...
Read More ...
Tags:   ios  safari  mobile  event bubbling  body  

Prevent iOS Zoom on Text Input Fields


Whenever a user clicks on a html input text field of a web page in iOS, Safari has an annoying little habit of zooming in (albeit slightly) while the soft keyboard comes up.  When a user dismissed the soft keyboard, the browser stays zoomed requiring the user to zoom-out again.  It seems like a slight overlook on Apple's part.   So how do you disable this behavior?

The "proper" way:

Prevent zooming all together by adding this meta tag to your head:  

<meta name="viewport" content="width=device-width ...
Read More ...
Tags:   Mobile Web  iOS  Zoom  Input