![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
metaviewport-parser
Advanced tools
Readme
This library uses the algorithm described in the W3C CSS Device Adaption specification to parse and interpret the content of a meta viewport declaration.
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'}
// }
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" }
FAQs
Parser for the content attribute of the meta viewport
The npm package metaviewport-parser receives a total of 866,614 weekly downloads. As such, metaviewport-parser popularity was classified as popular.
We found that metaviewport-parser demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.