metaviewport-parser

Meta viewport parser

This library uses the algorithm described in the W3C CSS Device Adaption specification to parse and interpret the content of a meta viewport declaration.

Attribute parser

The function parseMetaViewPortContent() takes the content of the content attribute of a meta viewport declaration, and parses it into an object separating valid properties (key validProperties), unknown properties (key unknownProperties), and known properties with invalid values (key invalidValues).

<meta name=viewport content="width=device-width">

// contentAttr contains "width=device-width";

var metaparser = require('metaviewport-parser');
console.log(metaparser.parseMetaViewPortContent(contentAttr));
// { validProperties: {width: 'device-width'},
//   unknownProperties: {},
//   invalidValues: {}
// }

<meta name=viewport content="width=foo,initial-scale=1">

var metaparser = require('metaviewport-parser');
console.log(metaparser.parseMetaViewPortContent(contentAttr));
// { validProperties: {'initial-scale': 1},
//   unknownProperties: {},
//   invalidValues: {'width': 'foo'}
// }

<meta name=viewport content="width=foo,initial-scale=1">

var metaparser = require('metaviewport-parser');
console.log(metaparser.parseMetaViewPortContent(contentAttr));
// { validProperties: {'initial-scale': 1},
//   unknownProperties: {},
//   invalidValues: {'width': 'foo'}
// }

Viewport properties interpreter

The function getRenderingDataFromViewport() takes an object with valid properties of a viewport (width, height, initial-scale, maximum-scale, minimum-scale, user-scalable), and parameters describing the browser dimensions, and returns an object describing the inital width, height and zoom used to render a page with such a viewport, and whether the user can zoom or not (property userZoom with values zoom or fixed).

The following examples assume a browser with a device-width of 320, a device-height of 480, a maximum zoom of 4 and minimum zoom of 0.25.

The zoom key is set to null when the value is interpreted as "auto".

<meta name=viewport content="width=device-width">

// contentAttr contains "width=device-width";

var metaparser = require('metaviewport-parser');
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
console.log(renderingData);
// { zoom: null, width: 320, height: 480, userZoom: "zoom" }

<meta name=viewport content="initial-scale=1">

var metaparser = require('metaviewport-parser');
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
console.log(renderingData);
// { zoom: 1, width: 320, height: 480, userZoom: "zoom" }

<meta name=viewport content="initial-scale=2.0,height=device-width">

var metaparser = require('metaviewport-parser');
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
console.log(renderingData);
// { zoom: 2, width: 213, height: 320, userZoom: "zoom" }

<meta name=viewport content="initial-scale=1,user-scalable=no">

var metaparser = require('metaviewport-parser');
var viewport = metaparser.parseMetaViewPortContent(contentAttr);
var renderingData = metaparser.getRenderingDataFromViewport(viewport.validProperties);
console.log(renderingData);
// { zoom: 1, width: 320, height: 480, userZoom: "fixed" }