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
Section titled “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
Section titled “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>
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
Section titled “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";
Detecting Browsers
Section titled “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(); // booleanconsole.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
Section titled “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
Section titled “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: