# clear-viewport

> * Solve the problem of page adaptation in H5 development, especially mobile development * Excellent performance, the page don't need to be re-rendered

Latest version **1.2.1** (published 2022-12-05) · 0 weekly downloads

## Install

```sh
npm install clear-viewport
pnpm add clear-viewport
yarn add clear-viewport
bun add clear-viewport
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.1 |
| Published | 2022-12-05 |
| First published | 2020-12-17 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 19.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | 徐孝楼 |
| Maintainers | xlou |
| Keywords | 移动端开发, 屏幕自适应, 屏幕适配, 窗口大小适配, clear-viewport, clear-viewport.min.js, clear, javascript, js, Vue, React, Angular |

## Links

- npm: https://www.npmjs.com/package/clear-viewport
- Repository: https://github.com/omlou/clear-viewport
- Homepage: https://github.com/omlou/clear-viewport#readme
- Issues: https://github.com/omlou/clear-viewport/issues
- npm.io page: https://npm.io/package/clear-viewport

## Alternatives

- [@mapbox/jsonlint-lines-primitives](https://npm.io/package/@mapbox/jsonlint-lines-primitives.md) — 5.3M weekly downloads
- [reftools](https://npm.io/package/reftools.md) — 3.5M weekly downloads
- [@hey-api/openapi-ts](https://npm.io/package/@hey-api/openapi-ts.md) — 3.5M weekly downloads
- [@mapbox/geojson-rewind](https://npm.io/package/@mapbox/geojson-rewind.md) — 2.4M weekly downloads
- [turbo-stream](https://npm.io/package/turbo-stream.md) — 1.7M weekly downloads

## Recent versions

- 1.2.1 (latest) — 2022-12-05
- 1.2.0 — 2022-12-04
- 1.1.0 — 2022-02-09
- 1.0.9 — 2022-02-09
- 1.0.7 — 2022-01-11
- 1.0.6 — 2022-01-11
- 1.0.5 — 2022-01-11
- 1.0.4 — 2022-01-11
- 1.0.3 — 2022-01-11
- 1.0.2 — 2022-01-10
- 1.0.1 — 2021-12-31
- 1.0.0 — 2020-12-17

## README

### Introduce
* Solve the problem of page adaptation in H5 development, especially mobile development
* Excellent performance, the page don't need to be re-rendered

### Principle
* 1rem is equal to the "font-size" of the html root element, the default is 16px
* Dynamically changing the font-size of the root can change the size of the rem

### Download

Use npm install

```shell
npm i clear-viewport -S
```

use script tag import

```html
<script src="https://gitee.com/xlou/clear-viewport/raw/master/dist/clear-viewport.min.js"></script>
<!-- Recommend to download to local use -->
<script>
  cvp.init()
</script>
```

### Usage

Use Module

```javascript
import {cvp} from 'clear-viewport'

/* Recommended configuration on the mobile (design draft is 375px, 750px is the same) */
cvp.init({
  width:375,
  fontSize:'0.14rem'
})

/* PC recommended configuration (design draft is 1920px)  */
cvp.init({
  width:1920,
  metaViewport:false,
  fontSize:'0.14rem'
})
```

### Options

#### cvp:

|Key|Type|Description|
|----|----|----|
|init|function|Init the clear-viewport|
|info|object|Return the informations of clear-viewport that current page used|

#### init params

|Key|Type|Default|Supported values|Description|
|----|----|----|----|----|
|width|number|375|number|The width of the target window (the number of window units)|
|mobile|boolean|true|boolean|Whether to open the mobile compatibility mode, compatible with the browsers of WeChat and QQ|
|fontSize|String|"0.16rem"|string|The default font-size of the page, set on the body tag, defaults to "0.16rem" in mobile compatibility mode|
|metaViewport|boolean|true|boolean|Whether to use the \<meta name="viewport"> tag|
|userScalable|string \| null|"no"|"yes","no",null|Meta tag related, whether to support user scalable|
|initialScalable|string \| null|"1.0"|string,null|Meta tag related, initial scaling value|
|minimumScale|string|null|string,null|Meta tag related, min scaling value|
|maximumScale|string|null|string,null|Meta tag related, max scaling value|

If the attribute that supports "null" is set to null, the "meta" tag will not configure the attribute.

When "mobile" is set to false, for example, the width of the target in the design is 20px, then set 20rem in the code.  
When "mobile" is set to true (use the mobile compatibility mode), if the width of the target in the design is 20px, then set 0.2rem in the code (that is, divide the design value by 100).

#### info attributes

docInfo:

* meta: HTMLMetaElement, return meta tag of this page

* rootSize: string, return the font-size of root

options: object, return the options of clear-viewport this page

---
_Source: https://npm.io/package/clear-viewport · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._