DMleadgen
46d973904b
Next.js website for Rocky Mountain Vending company featuring: - Product catalog with Stripe integration - Service areas and parts pages - Admin dashboard with Clerk authentication - SEO optimized pages with JSON-LD structured data Co-authored-by: Cursor <cursoragent@cursor.com>
110 lines
3.9 KiB
Text
110 lines
3.9 KiB
Text
[](https://david-dm.org/dontcallmedom/metaviewport-parser#info=devDependencies)
|
|
|
|
# Meta viewport parser
|
|
|
|
This library uses the algorithm described in the [W3C CSS Device Adaption specification](http://dev.w3.org/csswg/css-device-adapt/#viewport-meta) 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`).
|
|
|
|
```html
|
|
<meta name=viewport content="width=device-width">
|
|
```
|
|
|
|
```javascript
|
|
// contentAttr contains "width=device-width";
|
|
|
|
var metaparser = require('metaviewport-parser');
|
|
console.log(metaparser.parseMetaViewPortContent(contentAttr));
|
|
// { validProperties: {width: 'device-width'},
|
|
// unknownProperties: {},
|
|
// invalidValues: {}
|
|
// }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="width=foo,initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
var metaparser = require('metaviewport-parser');
|
|
console.log(metaparser.parseMetaViewPortContent(contentAttr));
|
|
// { validProperties: {'initial-scale': 1},
|
|
// unknownProperties: {},
|
|
// invalidValues: {'width': 'foo'}
|
|
// }
|
|
```
|
|
|
|
|
|
```html
|
|
<meta name=viewport content="width=foo,initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
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".
|
|
|
|
```html
|
|
<meta name=viewport content="width=device-width">
|
|
```
|
|
|
|
```javascript
|
|
// 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" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=1">
|
|
```
|
|
|
|
```javascript
|
|
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" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=2.0,height=device-width">
|
|
```
|
|
|
|
```javascript
|
|
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" }
|
|
```
|
|
|
|
```html
|
|
<meta name=viewport content="initial-scale=1,user-scalable=no">
|
|
```
|
|
|
|
```javascript
|
|
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" }
|
|
```
|
|
|