Responsive Viewport

Installation

Include ReView.js in the head of your HTML document, just after your viewport meta tag.

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no' /> <script type='text/javascript' src='ReView.js'></script>

Note the lack of initial-scale in the viewport meta tag. This often allows for a cleaner viewport switch.

ReView works without a meta tag, but providing one is recommended.

Usage

Any link(s) with the class ‘reView’ will automatically switch the viewport.

Links are only made visible if viewport switching is possible.

<a class='reView' href='http://responsiveviewport.com'>ReView</a>

Ensure that the links are hidden via CSS to ensure that users with JavaScript disabled do not see them.

.reView { display: none; }

Anchor Text Updates

When a viewport is successfully set all ReView anchors on the page are updated.

By default the text is updated with ‘Core View’ and ‘Default View’ as appropriate.

Custom anchor text can be supplied via the data-attributes data-defaultText and data-coreText

<a class='reView' data-defaultText='Mobile View' data-coreText='Desktop View' href='http://responsiveviewport.com'>ReView</a>

Supported Devices

ReView allows viewport switching on anything that implements a modern, standards compliant viewport that allows modification via the viewport meta tag.

Viewports that are already sufficiently large are automatically recognised as being in default view, even if viewport switching is not supported. This enables correct behaviour for extensions like the conditional load plugin.

Persistence

ReView saves the current view choice for the duration of a session.

Once the browsing session has ended, the ReView view preference is released.

Extensions (Advanced)

ReView.js exposes one variable and two functions. These can be useful if you wish to override ReView's default behaviour.

reView.mode; // 'core' or 'default' reView.setMobile(); reView.setDefault(); // You can also query support via ReView's viewport object reView.v.bSupported; // true/false

viewportChange Event

ReView throws a custom event on a successful viewport change.

// Viewport change //----------------- document.addEventListener('viewportChange', function() { }, false);

Success/Failure Policies

You can define success and failure callbacks with regards to setting a viewport.

An efficient approach could be to progressively enhance your core website when you know you're in default view mode (i.e. not mobile).

Desktop machines still fire the success callback on initial detection of a viewport that qualifies as a default view.

// Failure callback //------------------ reView.failurePolicy = function() { if(this.mode === 'default') { } // Core view failed }; // Success callback //------------------ reView.successPolicy = function() { if(this.mode === 'default') { } // Default view success };

Extension Ideas

Default view success,

  • Load further styling and inject content.
  • Load higher bandwidth resources e.g. background images, custom fonts.
  • Measure device-pixel-ratio and load high-res images.
  • Execute JavaScript that is potentially computationally expensive.

To put it simply, if you are in a default view you are on,

  • A sufficiently capable desktop machine.
  • A mobile device upon which the user has indicated they want the full experience.

So design for a solid core experience that can then be progressively enhanced if either of the above scenarios takes effect.