在前端开发过程中，我们经常需要处理 meta 标签中的 viewport，这个标签能够控制网页在移动设备上的显示方式，如显示比例、缩放等。而 metaviewport-parser 这个 npm 包能够帮助我们更方便快捷地解析和设置 viewport。
安装
使用 npm 安装 metaviewport-parser：
--- ------- ------------------- ------
解析 meta viewport 标签
解析 meta viewport 标签是这个包最主要的功能，我们可以简单实现如下：
----- ------------------ - ------------------------------- ----- ------ - --- --------------------- ----- -------- - ----------------------------------
其中，metaViewportContent 是 meta viewport 标签内容的字符串，viewport 是解析完成后返回的对象，包含了各种属性和对应的值。例如下面这个例子：
----- --------------- ---------------------------- -----------------
解析后会得到如下的对象：
- ------ --------------- ---------------- --- -
这个对象中，键为属性名称，值为对应的属性值。注意，这个对象里的属性名称没有前缀 meta。
设置 meta viewport 标签
除了解析外，我们还可以使用该包来设置 meta viewport 标签，这样可以方便地修改网页在移动设备上的显示方式。设置 meta viewport 标签的方法如下：
----- ------------------ - ------------------------------- ----- ------ - --- --------------------- --------------------------- --- ----- ------------------- - ------------------
这样，在修改 initial-scale 属性之后，我们可以通过 parser.toString() 方法来重新获取 meta viewport 标签的字符串表示形式。可以得到如下的字符串：
----- --------------- ------------------------- --------------------
注意，这里修改 initial-scale 属性的值之后会打乱原来的属性顺序，这是因为我们在设置属性值时直接修改了对应的子项，而在设置属性值时对象的属性顺序不一定会保持不变。
结论
使用 metaviewport-parser 包，我们可以很方便地解析和修改页面的 meta viewport 标签。在实际使用过程中，我们可以通过该包提供的方法来快速地获取或设置 meta viewport 标签。同时，在该包源代码中也可以学习到对象的操作技巧和对象属性的访问方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/57096