{"id":31970685,"url":"https://github.com/winjs-dev/winjs-plugin-viewport","last_synced_at":"2025-10-14T19:18:16.892Z","repository":{"id":267742140,"uuid":"901773377","full_name":"winjs-dev/winjs-plugin-viewport","owner":"winjs-dev","description":"An WinJS plugin to provide support for mobile viewport.","archived":false,"fork":false,"pushed_at":"2025-08-10T14:45:25.000Z","size":526,"stargazers_count":2,"open_issues_count":3,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-16T18:22:00.562Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/winjs-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-12-11T09:38:37.000Z","updated_at":"2025-08-10T10:19:50.000Z","dependencies_parsed_at":"2024-12-12T07:14:10.502Z","dependency_job_id":"704a75b8-bd95-4a8e-b11b-f483e7260f52","html_url":"https://github.com/winjs-dev/winjs-plugin-viewport","commit_stats":null,"previous_names":["winjs-dev/winjs-plugin-viewport"],"tags_count":1,"template":false,"template_full_name":"winjs-dev/winjs-plugin-template","purl":"pkg:github/winjs-dev/winjs-plugin-viewport","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-viewport","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-viewport/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-viewport/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-viewport/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/winjs-dev","download_url":"https://codeload.github.com/winjs-dev/winjs-plugin-viewport/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/winjs-dev%2Fwinjs-plugin-viewport/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279020654,"owners_count":26086895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-14T02:00:06.444Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-10-14T19:18:11.037Z","updated_at":"2025-10-14T19:18:16.886Z","avatar_url":"https://github.com/winjs-dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @winner-fed/plugin-viewport\n\nViewport plugin for WinJS.\n\n\u003cp\u003e\n  \u003ca href=\"https://npmjs.com/package/@winner-fed/plugin-viewport\"\u003e\n   \u003cimg src=\"https://img.shields.io/npm/v/@winner-fed/plugin-viewport?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"npm version\" /\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"license\" /\u003e\n  \u003ca href=\"https://npmcharts.com/compare/@winner-fed/plugin-viewport?minimal=true\"\u003e\u003cimg src=\"https://img.shields.io/npm/dm/@winner-fed/plugin-viewport.svg?style=flat-square\u0026colorA=564341\u0026colorB=EDED91\" alt=\"downloads\" /\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n底层基于 [postcss-mobile-forever](https://github.com/wswmsword/postcss-mobile-forever) 封装。\n\n## Usage\n\nInstall:\n\n```bash\nnpm add @winner-fed/plugin-viewport -D\n```\n\nAdd plugin to your `.winrc.ts`:\n\n```ts\n// .winrc.ts\nexport default {\n  plugins: ['@winner-fed/plugin-viewport'],\n  // 开启配置\n  // 参考 https://github.com/wswmsword/postcss-mobile-forever?tab=readme-ov-file#%E9%85%8D%E7%BD%AE%E5%8F%82%E6%95%B0 \n  viewport: {}\n};\n```\n\n## Options\n\n| Name | Type | Default | Desc                                                                                                                                                                                                                                                                                        |\n|:--|:--|:--|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|\n| viewportWidth | number\\|(file: string) =\u003e number | 750 | 应用基于该宽度进行开发，转换后的伸缩视图将会以该宽度的视图作为标准进行比例伸缩；可以传递函数动态生成宽度，例如 `file =\u003e file.includes(\"vant\") ? 375 : 750` 表示在名称包含“vant”的文件内使用 375px 的宽度，而其他文件使用 750px 的宽度                                                                                                                                         |\n| mobileUnit | string | \"vw\" | 移动端竖屏视口视图，转换成什么伸缩单位？设置为 `rem` 后激活 **rem-mode**                                                                                                                                                                                                                                                                         |\n| maxDisplayWidth | number | / | 伸缩视图的最大宽度                                                                                                                                                                                                                                                                                |\n| basicRemWidth | number | / | *rem-mode* 的基准宽度，若不设定，将通过 `viewportWidth` 获取 |\n| enableMediaQuery | boolean | false | 打开媒体查询模式，打开后将自动关闭 `maxDisplayWidth`，激活 **mq-mode**                                                                                                                                                                                                                                                         |\n| desktopWidth | number | 600 | 适配到桌面端宽度时，展示的视图宽度                                                                                                                                                                                                                                                                             |\n| landscapeWidth | number | 425 | 适配到移动端横屏宽度时，展示的视图宽度                                                                                                                                                                                                                                                                           |\n| appSelector | string | / | 页面最外层选择器，例如“`#app`”，用于设置在桌面端和移动端横屏时的居中样式，样式文件中至少要包含空的选择器 `#app {}`                                                                                                                                                                                                                                                    |\n| appContainingBlock | \"calc\"\\|\"manual\"\\|\"auto\" | \"calc\" | 该属性和矫正 `fixed` 定位元素有关，`manual` 将不矫正；`calc` 将通过插件主动计算的方式矫正元素尺寸，是默认行为；`auto` 将通过 `transform: translateZ(0)` 强制设置根[包含块](https://developer.mozilla.org/zh-CN/docs/Web/CSS/Containing_block)为 `appSelector`，从而自动矫正元素，并且此时需要设置属性 `necessarySelectorWhenAuto`                                            |\n| necessarySelectorWhenAuto | string | / | 当 `appContainingBlock` 设为 `auto` 时，需要指定该属性，该属性指定了 `appSelector` 往内一层的元素选择器，查看一个[关于指定元素作为包含块的实验](https://github.com/wswmsword/web-experiences/tree/main/css/fixed-on-containing-block)以了解如何使用该属性，您也可以查看[使用这个属性的示例项目](./example/cases/auto-app-containing-block/postcss.config.js)以了解如何使用这个属性 |\n| border | boolean\\|string | false | 在页面外层展示边框吗，用于分辨居中的小版心布局和背景，可以设置颜色字符串                                                                                                                                                                                                                                                        |\n| disableDesktop | boolean | false | 打开则不做桌面端适配，使用该参数前需要打开 `enableMediaQuery`                                                                                                                                                                                                                                                    |\n| disableLandscape | boolean | false | 打开则不做移动端横屏适配，使用该参数前需要打开 `enableMediaQuery`                                                                                                                                                                                                                                                  |\n| disableMobile | boolean | false | 打开则不做移动端竖屏适配，把 px 转换为视口单位，如 vw                                                                                                                                                                                                                                                              |\n| exclude | RegExp\\|RegExp[] | / | 排除文件或文件夹                                                                                                                                                                                                                                                                                    |\n| include | RegExp\\|RegExp[] | / | 包括文件或文件夹                                                                                                                                                                                                                                                                                    |\n| unitPrecision | number | 3 | 单位精确到小数点后几位？                                                                                                                                                                                                                                                                                |\n| propList | string[] | ['*'] | 哪些属性要替换，哪些属性忽略？用法参考 [postcss-px-to-viewport 文档](https://github.com/evrone/postcss-px-to-viewport/blob/HEAD/README_CN.md)                                                                                                                                                                    |\n| selectorBlackList | (string\\|RegExp)[] | [] | 选择器黑名单，名单上的不转换                                                                                                                                                                                                                                                                              |\n| propertyBlackList | propertyBlackList | [] | 属性黑名单，名单上的不转换，如果要指定选择器内的属性，用对象的键表示选择器名称，具体用法见 [vant 的范例代码](./example/others/vant-vue/postcss.config.cjs#L9C17-L9C17)                                                                                                                                                                        |\n| valueBlackList | (string\\|RegExp)[] | [] | 属性值黑名单，名单上的值不转换                                                                                                                                                                                                                                                                             |\n| rootContainingBlockSelectorList | (string\\|RegExp)[] | [] | 包含块是根元素的选择器列表，效果和标注注释 `/* root-containing-block */` 相同                                                                                                                                                                                                                                      |\n| verticalWritingSelectorList | (string\\|RegExp)[] | [] | 纵向书写模式的选择器列表，效果和在选择器顶部标注注释 `/* vertical-writing-mode */` 相同                                                                                                                                                                                                                                 |\n| minDesktopDisplayWidth | number | / | 宽度断点，如果不提供这个值，默认使用 `desktopWidth` 的值，视图大于这个宽度，则页面宽度是桌面端宽度 `desktopWidth`，“原理和输入输出范例”一节具体介绍了该值的触发情况                                                                                                                                                                                          |\n| maxLandscapeDisplayHeight | number | 640 | 高度断点，视图小于这个高度，并满足一定条件，则页面使用移动端横屏宽度，“原理和输入输出范例”一节具体介绍了该值的触发情况                                                                                                                                                                                                                                |\n| side | any | / | 侧边配置，在桌面端媒体查询中生效，用于利用宽屏的空间，后文将介绍它的若干子属性                                                                                                                                                                                                                                                     |\n| comment | any | / | 自定义注释，改变注释的名称，后文将介绍它的若干子属性                                                                                                                                                                                                                                                                  |\n| customLengthProperty | any | / | 用于指定需要添加到桌面端或横屏的自定义变量（css 变量，`var(...)`），如果不指定，默认**所有**和长度有关的属性，如果使用了自定义变量，都会被添加入桌面端和横屏，后文将介绍它的若干子属性                                                                                                                                                                                        |\n| experimental.extract | boolean | false | 提取桌面端与横屏样式代码，用于生产环境，用于代码分割优化产包，具体查看“注意事项”一节                                                                                                                                                                                                                                                 |\n| experimental.minDisplayWidth | number | / | 限制最小宽度，和 `maxDisplayWidth` 搭配使用         \n\n### 默认配置参数\n\n```json\n{\n  \"viewportWidth\": 750,\n  \"maxDisplayWidth\": null,\n  \"enableMediaQuery\": false,\n  \"desktopWidth\": 600,\n  \"landscapeWidth\": 425,\n  \"minDesktopDisplayWidth\": null,\n  \"maxLandscapeDisplayHeight\": 640,\n  \"appSelector\": \"#app\",\n  \"appContainingBlock\": \"calc\",\n  \"necessarySelectorWhenAuto\": null,\n  \"border\": false,\n  \"disableDesktop\": false,\n  \"disableLandscape\": false,\n  \"disableMobile\": false,\n  \"exclude\": null,\n  \"include\": null,\n  \"unitPrecision\": 3,\n  \"selectorBlackList\": [],\n  \"valueBlackList\": [],\n  \"rootContainingBlockSelectorList\": [],\n  \"verticalWritingSelectorList\": [],\n  \"propList\": [\"*\"],\n  \"mobileUnit\": \"vw\",\n  \"side\": {\n    \"width\": null,\n    \"gap\": 18,\n    \"selector1\": null,\n    \"selector2\": null,\n    \"selector3\": null,\n    \"selector4\": null,\n    \"width1\": null,\n    \"width2\": null,\n    \"width3\": null,\n    \"width4\": null\n  },\n  \"comment\": {\n    \"applyWithoutConvert\": \"apply-without-convert\",\n    \"rootContainingBlock\": \"root-containing-block\",\n    \"notRootContainingBlock\": \"not-root-containing-block\",\n    \"ignoreNext\": \"mobile-ignore-next\",\n    \"ignoreLine\": \"mobile-ignore\",\n    \"verticalWritingMode\": \"vertical-writing-mode\"\n  },\n  \"customLengthProperty\": {\n    \"rootContainingBlockList_LR\": [],\n    \"rootContainingBlockList_NOT_LR\": [],\n    \"ancestorContainingBlockList\": [],\n    \"disableAutoApply\": false\n  },\n  \"experimental\": {\n    \"extract\": false,\n    \"minDisplayWidth\": null\n  }\n}\n```\n\n## License\n\n[MIT](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-viewport","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-viewport","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwinjs-dev%2Fwinjs-plugin-viewport/lists"}