Languages

• English
• 简体中文
• 日本語
• 한국어
• Français

Introduction

• 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

Usage

Using the Script Tag

<script src="https://unpkg.com/@xlou/[email protected]/dist/umd/viewport.min.js"></script>
<!-- It's recommended to download and use the file locally -->
<script>
  /* After including this JS file, the viewport object will be available on the window */
  vp.init({/* options */})
</script>

In a Node.js Project

Installation

npm i @xlou/viewport -S

In main.js or main.ts

/* Using the entire package */
import vp from '@xlou/viewport'

/* Recommended configuration on the mobile */
vp.init({
  width: 375, // The design draft here is 375px, and if it's 750px, then set it to 750.
  fontSize: '0.14rem'
})

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

API

vp

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

interface Options {
  width?: number;
  mobile?: boolean;
  fontSize?: string;
  metaViewport?: boolean;
  userScalable?: string | null;
  initialScale?: string | null;
  minimumScale?: string | null;
  maximumScale?: string | null;
}
interface StoreOptions {
  options: Options;
  docInfo: {
    meta: Element;
    rootSize: string;
  };
}
const vp: {
  init(options: Options): void;
  readonly info: StoreOptions;
}

Introduction to init options

|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).

Introduction to 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 "vp" this page