Package Exports

metaviewport-parser
metaviewport-parser/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (metaviewport-parser) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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" }