I work at Fanplayr, a small startup in the Bay Area. We’re an ecommerce platform that provides insights to hundreds of online retailers, and customer engaging solutions that drive traffic and conversions.

This week I started prototyping a mobile version of our offer widget with the following goals:

  • A simple, intuitive UI
  • Usable on any screen size, at any level of zoom

To make

Example

Unscaled Scaled
Unscaled example Scaled example

Calculating Zoom

The zoom factor is the ratio of the widths of the layout viewport to the visual viewport. For devices that expose the correct values, this is simply calculated as:

document.documentElement.clientWidth / window.innerWidth

Resources

  • http://www.quirksmode.org/mobile/viewports2.html