- Notifications
You must be signed in to change notification settings - Fork13
Dynamically control the mobile viewport
License
stripe-archive/mobile-viewport-control
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
This project is inactive and is no longer being maintained.
This JavaScript library attempts to solve the hard problem of creating afull-window modal experience for mobile browsers. The goal is to allowit to be dropped into any page regardless of its viewport settings. It doesthis by attempting to control the mobile viewport and by hiding all elementsexcept the one you are trying to modalize.
--
| [![scroll][scroll-gif]][scroll-gfy] | [![zoom][zoom-gif]][zoom-gfy] |
| __Figure 1.__ Scrolling | __Figure 2.__ Zooming + Scrolling |
--
Background. Theviewport is the visible part of the webpage on yourscreen (see quirksmode [1] [2]). It is controlled by two things:scrollandzoom. The user can swipe to scroll and pinch to zoom. A JavaScriptdeveloper can control the scroll programmatically, but there is no officiallysupported method for controlling thezoom programmatically. However, we dohave a de facto standard for limiting and initializing the zoom:
<head><metaname="viewport"content="initial-scale=1"><metaname="viewport"content="minimum-scale=0"><metaname="viewport"content="maximum-scale=10"></head>
Workaround. There is an undocumented feature that allows us to modify theviewport state at runtime by adding and modifying viewport tags. There arecaveats depending on the browser. The goal of this library is to identify andworkaround these caveats until there is a standard for programmaticallycontrolling zoom. We have researched and tested on multiple platforms, thoughwe are currently focusing support for Mobile Safari and WebViews on iOS 7, 8, and 9.(SeeCompatibility Testing)
Modals are the Use-Case. Viewport settings vary widely across differentwebpages, making it hard to create drop-in modal experiences that workeverywhere (seeStripe Checkout andAuth0 Lock). For browsers that cannotcreate pop-up tabs and for pages where redirection is not an option, thislibrary can help fill in the gaps.
UPDATE: See the upcomingPayment Request API for native mobile checkout modals for the web.
--
| [![freeze][freeze-gif]][freeze-gfy] | [![isolate][isolate-gif]][isolate-gfy] |
| __Figure 3.__ Freezing and Thawing | __Figure 4.__ Isolating the Modal |
--
The Abstraction. This library provides a limited abstraction forcontrolling zoom:freezing andthawing. (See Figure 3). Freezing will lockthe zoom to a given scale. Thawing will restore the viewport to what it wasbefore freezing, while also restoring the appropriate zoom limits (i.e. min andmax). Thawing in this way is useful in the context of a modal.
Isolating the Modal. The freeze/thaw functions are designed to be used inconjunction with a third operation:isolation. (See Figure 4). This is doneby passing an optional element ID to the freeze function, which you wouldpresumably wish to be the full-window modal. This temporarily applies CSSrules to ensure with high confidence that all elements except the given elementare collapsed (viadisplay:none). You can then style your element to fillthe window as a modal. Thawing will restore the page back to what it wasbefore.
npm install mobile-viewport-controlconstviewport=require('mobile-viewport-control');// ... or use `window.mobileViewportControl` if not used with package manager// Freeze the viewport at a desired scale.viewport.freeze(1.0,()=>console.log('notified when frozen!'));// Restore the viewport to what it was before freezing.viewport.thaw(()=>console.log('notified when thawed!'));
Additionally, to freeze the scroll area to a given element, you can pass anelement ID as the second argument. We do this by temporarily hiding everythingelse on the page. Just make sure your element is a direct child ofdocument.body.
viewport.freeze(1.0,'myElementID');
Please seeCompatibility Testing.
--
Source code for the animated figures above:mobile-viewport-control-viz
About
Dynamically control the mobile viewport
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors7
Uh oh!
There was an error while loading.Please reload this page.