Responsive Viewport

Dynamic Viewport System

ReView employs dynamic view switching via modification of the viewport meta tag.

Two views are identified,

  • ‘core’ (mobile) viewport
  • ‘default’ (desktop) viewport

The process follows some simple rules,

  • Initial tests are performed to anticipate support.
  • The viewport meta tag is imported if present.
  • Initial view mode is decided (core or default).
  • Viewport switches are checked post execution.
  • Success/failure policy is run dependent on result.

ReView takes care of the required events, meta tag support and a few mobile browser inconsistencies.

If a switch to the core view is judged unlikely to succeed and a viewport meta tag is present in the initial code, the page is reloaded, thereby achieving the desired result.

Core Viewport

Defined by viewport meta tag if available.

Otherwise a backup is provided,

  • Width set to device-width.
  • Scaling disabled.
  • Scale locked at 1.

Default Viewport

  • At least 980px.
  • Landscape screen width if greater than 980px.
  • Scaling enabled.
  • Max scale of 5, min scale of 0.25.

Default width based on maximum screen width minimises difficulties with viewport switching, browser quirks and orientation changes.

Desktop machines with a screen width greater than 980px are recognised as a default view, thereby triggering default mode success policy enhancements e.g. conditional loads.