Mobile Only
This library allows you to redirect desktop users to mobile by displaying a QR code alongside instructions for the user to follow.
Starting Development
You can use this library by downloading a standalone zip containing the necessary files, by linking to our CDN, or by installing from NPM for use in a webpack project.
Standalone Download
Download the bundle from this link.
Unzip into your web project and reference from your HTML like this:
<script src="zappar-mobileonly.js"></script>
CDN
Reference the zappar-mobileonly.js
library from your HTML like this:
<script src="https://libs.zappar.com/zappar-mobile-only/0.0.2/zappar-mobileonly.js"></script>
NPM Webpack Package
Run the following NPM command inside your project directory:
$ npm install --save @zappar/mobile-only
Then import the library into your JavaScript or TypeScript files:
import * as MobileOnly from "@zappar/mobile-only";
Usage
Detecting Browsers
The MobileOnly.isMobile()
function returns true if a mobile browser is being used:
import * as MobileOnly from "@zappar/mobile-only";
const mobile = MobileOnly.isMobile(); // boolean
console.log(mobile);
User agent can be provided to the isMobile()
function, if not specified, navigator.userAgent
is used:
import * as MobileOnly from "@zappar/mobile-only";
const mobile = MobileOnly.isMobile('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36');
console.log(mobile);
Displaying the UI
The QR code shown is generated from the current window.location.href.
You can show the redirection UI using MobileOnly.showUI()
. This should be used alongside MobileOnly.isMobile()
:
import * as MobileOnly from "@zappar/mobile-only";
if (!MobileOnly.isMobile()){
MobileOnly.showUI();
}
The showUI
function appends the elements as children of document.body
, with z-index
of 10000.
Customization
showUI()
function may be customized using an options parameter. Here's the available options alongside default values:
type Options = {
header? : string, // 'Almost there...';
instructions? : string, // "Use your phone's camera to scan the QR code below";
footer? : string, // 'or visit';
url? : string // window?.location?.href || '0.0.0.0';
}
Example:
import * as MobileOnly from "@zappar/mobile-only";
if (!MobileOnly.isMobile()){
MobileOnly.showUI({
url : 'www.zappar.com'
});
}
This shows the following UI: