3 | Go to index page
6 |
7 |
8 |
--------------------------------------------------------------------------------
/examples/nuxt/pages/index.vue:
--------------------------------------------------------------------------------
1 |
2 | Another Page
4 |-------------- 412px wide text --------------
5 |
3 | Go to another page
6 |
7 |
8 |
--------------------------------------------------------------------------------
/src/internal/ArrayLike.ts:
--------------------------------------------------------------------------------
1 | export const arrayFrom: typeof Array.from =
2 | __TYPESCRIPT_TARGET__ !== "es5"
3 | ? /* eslint-disable-next-line compat/compat */
4 | Array.from
5 | : Index Page
4 |-------------- 412px wide text --------------
5 |Index Page
7 |-------------- 412px wide text --------------
8 | Go to another page 9 | 10 | ); 11 | 12 | export default Index; 13 | -------------------------------------------------------------------------------- /examples/next-app-router/app/another/page.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import type { FunctionComponent } from "react"; 3 | 4 | const Another: FunctionComponent = () => ( 5 | <> 6 |Another Page
7 |-------------- 412px wide text --------------
8 | Go to index page 9 | 10 | ); 11 | 12 | export default Another; 13 | -------------------------------------------------------------------------------- /src/internal/string.ts: -------------------------------------------------------------------------------- 1 | export const camelizeKebabCaseString = (str: string): string => 2 | str 3 | .replace(/\s+/g, "") 4 | .toLowerCase() 5 | .replace(/-./g, (s) => s[1].toUpperCase()); 6 | 7 | export const kebabizeCamelCaseString = (str: string): string => 8 | str 9 | .replace(/\s+/g, "") 10 | .replace(/[A-Z]+/g, (s) => `-${s[0]}`) 11 | .toLowerCase(); 12 | -------------------------------------------------------------------------------- /examples/next-pages-router/pages/another.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | import type { FunctionComponent } from "react"; 3 | 4 | const Another: FunctionComponent = () => ( 5 |
6 |
10 | );
11 |
12 | export default Another;
13 |
--------------------------------------------------------------------------------
/examples/next-pages-router/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import type { FunctionComponent } from "react";
3 |
4 | const Index: FunctionComponent = () => (
5 | Another Page
7 |-------------- 412px wide text --------------
8 | Go to index page 9 |
6 |
10 | );
11 |
12 | export default Index;
13 |
--------------------------------------------------------------------------------
/src/apis/activateAttributes.node.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import { activateAttributes } from "./activateAttributes.js";
3 |
4 | describe("activateAttributes", () => {
5 | describe("running in environments where no window object exists", () => {
6 | it("does not throw error", () => {
7 | expect(activateAttributes).not.toThrowError();
8 | });
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/src/internal/Media.ts:
--------------------------------------------------------------------------------
1 | export type Media = string;
2 |
3 | export const defaultMedia = "";
4 |
5 | export const createMedia = (optionalMedia: Media | undefined): Media =>
6 | optionalMedia ?? defaultMedia;
7 |
8 | export const mergeOptionalMedia = (
9 | precedingOptionalMedia: Media | undefined,
10 | followingOptionalMedia: Media | undefined,
11 | ): Media | undefined => followingOptionalMedia ?? precedingOptionalMedia;
12 |
--------------------------------------------------------------------------------
/examples/nuxt/README.ja.md:
--------------------------------------------------------------------------------
1 | # Nuxt アプリケーションでの使用例
2 |
3 | [English](/examples/nuxt/README.md) | **日本語**
4 |
5 | この例では、[Nuxt](https://nuxt.com/) アプリケーションで Viewport Extra を使用する方法を示します。
6 |
7 | ## 補足
8 |
9 | - デスクトップ向けブラウザの開発者ツールで動作を確認する場合、Viewport Extra を使用するページへ移動するよりも先に、モバイル端末のシミュレーションを有効化し、ビューポートを目的のサイズに設定しておく必要があります。順番が逆である場合、ブラウザが `` 要素の `initial-scale` の設定を無視してしまう状態となります。これは、開発者ツールのシミュレーションに特有の現象であり、実際のモバイル向けブラウザでは発生しません。
10 |
--------------------------------------------------------------------------------
/examples/no-framework/README.ja.md:
--------------------------------------------------------------------------------
1 | # フレームワークを使用しないアプリケーションでの使用例
2 |
3 | [English](/examples/no-framework/README.md) | **日本語**
4 |
5 | この例では、Viewport Extra をフレームワークを使用しないアプリケーションで使用する方法を示します。
6 |
7 | ## 補足
8 |
9 | - デスクトップ向けブラウザの開発者ツールで動作を確認する場合、Viewport Extra を使用するページへ移動するよりも先に、モバイル端末のシミュレーションを有効化し、ビューポートを目的のサイズに設定しておく必要があります。順番が逆である場合、ブラウザが `` 要素の `initial-scale` の設定を無視してしまう状態となります。これは、開発者ツールのシミュレーションに特有の現象であり、実際のモバイル向けブラウザでは発生しません。
10 |
--------------------------------------------------------------------------------
/src/apis/setParameters.node.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import { setParameters } from "./setParameters.js";
3 |
4 | describe("setParameters", () => {
5 | describe("running in environments where no window object exists", () => {
6 | it("does not throw error", () => {
7 | expect(() => {
8 | setParameters([{ content: { minimumWidth: 412 } }]);
9 | }).not.toThrowError();
10 | });
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/examples/nuxt/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "viewport-extra-nuxt-example",
3 | "private": true,
4 | "type": "module",
5 | "scripts": {
6 | "build": "nuxt build",
7 | "dev": "nuxt dev",
8 | "generate": "nuxt generate",
9 | "preview": "nuxt preview",
10 | "postinstall": "nuxt prepare"
11 | },
12 | "dependencies": {
13 | "nuxt": "4.2.1",
14 | "viewport-extra": "3.0.0",
15 | "vue": "3.5.18",
16 | "vue-router": "4.5.1"
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/apis/activateMediaSpecificAttributes.node.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import { activateMediaSpecificAttributes } from "./activateMediaSpecificAttributes.js";
3 |
4 | describe("activateMediaSpecificAttributes", () => {
5 | describe("running in environments where no window object exists", () => {
6 | it("does not throw error", () => {
7 | expect(activateMediaSpecificAttributes).not.toThrowError();
8 | });
9 | });
10 | });
11 |
--------------------------------------------------------------------------------
/lefthook.yml:
--------------------------------------------------------------------------------
1 | commit-msg:
2 | jobs:
3 | - run: npm run commitcheck -- {1}
4 |
5 | pre-commit:
6 | piped: true
7 | jobs:
8 | - run: npm run spellcheck -- {staged_files}
9 | - run: npm run stylecheck:code -- --write {staged_files}
10 | stage_fixed: true
11 | - run: npm run stylecheck:docs -- --write {staged_files}
12 | glob: "*.md"
13 | stage_fixed: true
14 | - run: npm run es5check
15 | - run: npm run typecheck
16 | - run: npm run test
17 |
--------------------------------------------------------------------------------
/examples/next-app-router/README.ja.md:
--------------------------------------------------------------------------------
1 | # Next.js (App Router) アプリケーションでの使用例
2 |
3 | [English](/examples/next-app-router/README.md) | **日本語**
4 |
5 | この例では、[Next.js (App Router)](https://nextjs.org/docs/app) アプリケーションで Viewport Extra を使用する方法を示します。
6 |
7 | ## 補足
8 |
9 | - デスクトップ向けブラウザの開発者ツールで動作を確認する場合、Viewport Extra を使用するページへ移動するよりも先に、モバイル端末のシミュレーションを有効化し、ビューポートを目的のサイズに設定しておく必要があります。順番が逆である場合、ブラウザが `` 要素の `initial-scale` の設定を無視してしまう状態となります。これは、開発者ツールのシミュレーションに特有の現象であり、実際のモバイル向けブラウザでは発生しません。
10 |
--------------------------------------------------------------------------------
/src/internal/ArrayLike.es5.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import { arrayFrom } from "./ArrayLike.js";
3 |
4 | describe("arrayFrom", () => {
5 | describe("case where target of TypeScript is es5", () => {
6 | it("should not return Array.from", async () => {
7 | expect(arrayFrom).not.toBe(Array.from);
8 | });
9 |
10 | it("should behave same as Array.from", async () => {
11 | expect(arrayFrom("foo")).toStrictEqual(Array.from("foo"));
12 | });
13 | });
14 | });
15 |
--------------------------------------------------------------------------------
/examples/next-pages-router/README.ja.md:
--------------------------------------------------------------------------------
1 | # Next.js (Pages Router) アプリケーションでの使用例
2 |
3 | [English](/examples/next-pages-router/README.md) | **日本語**
4 |
5 | この例では、[Next.js (Pages Router)](https://nextjs.org/docs/pages) アプリケーションで Viewport Extra を使用する方法を示します。
6 |
7 | ## 補足
8 |
9 | - デスクトップ向けブラウザの開発者ツールで動作を確認する場合、Viewport Extra を使用するページへ移動するよりも先に、モバイル端末のシミュレーションを有効化し、ビューポートを目的のサイズに設定しておく必要があります。順番が逆である場合、ブラウザが `` 要素の `initial-scale` の設定を無視してしまう状態となります。これは、開発者ツールのシミュレーションに特有の現象であり、実際のモバイル向けブラウザでは発生しません。
10 |
--------------------------------------------------------------------------------
/src/apis/activateMediaSpecificAttributes.ts:
--------------------------------------------------------------------------------
1 | import { getMetaElementList } from "../internal/Document.js";
2 | import { createPartialMediaSpecificParameters } from "../internal/HTMLMetaElement.js";
3 | import { setMediaSpecificParametersList } from "./setMediaSpecificParametersList.js";
4 |
5 | export const activateMediaSpecificAttributes = (): void => {
6 | if (typeof window === "undefined") return;
7 | setMediaSpecificParametersList(
8 | getMetaElementList(document).map(createPartialMediaSpecificParameters),
9 | );
10 | };
11 |
--------------------------------------------------------------------------------
/src/apis/setMediaSpecificParametersList.node.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import { setMediaSpecificParametersList } from "./setMediaSpecificParametersList.js";
3 |
4 | describe("setMediaSpecificParametersList", () => {
5 | describe("running in environments where no window object exists", () => {
6 | it("does not throw error", () => {
7 | expect(() => {
8 | setMediaSpecificParametersList([{ content: { minimumWidth: 412 } }]);
9 | }).not.toThrowError();
10 | });
11 | });
12 | });
13 |
--------------------------------------------------------------------------------
/src/internal/number.ts:
--------------------------------------------------------------------------------
1 | export const mathTrunc: typeof Math.trunc =
2 | __TYPESCRIPT_TARGET__ !== "es5"
3 | ? /* eslint-disable-next-line compat/compat */
4 | Math.trunc
5 | : (num) => (num < 0 ? Math.ceil : Math.floor)(num);
6 |
7 | export const truncateDecimalNumber = (
8 | num: number,
9 | decimalPlaces: number,
10 | ): number =>
11 | // biome-ignore lint/suspicious/noGlobalIsFinite: isFinite is safe to use here
12 | isFinite(decimalPlaces)
13 | ? mathTrunc(num * 10 ** decimalPlaces) / 10 ** decimalPlaces
14 | : num;
15 |
--------------------------------------------------------------------------------
/src/internal/MediaAttribute.ts:
--------------------------------------------------------------------------------
1 | import type { Media } from "./Media.js";
2 |
3 | export type MediaAttribute = string;
4 |
5 | export const mergeNullableMediaAttribute = (
6 | precedingNullableMediaAttribute: MediaAttribute | null,
7 | followingNullableMediaAttribute: MediaAttribute | null,
8 | ): MediaAttribute | null =>
9 | followingNullableMediaAttribute ?? precedingNullableMediaAttribute;
10 |
11 | export const createOptionalMedia = (
12 | nullableMediaAttribute: MediaAttribute | null,
13 | ): Media | undefined => nullableMediaAttribute ?? undefined;
14 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "module": "nodenext",
4 | "lib": ["esnext", "dom"],
5 | "strict": true,
6 | "moduleResolution": "nodenext",
7 | "resolveJsonModule": true,
8 | "esModuleInterop": true,
9 | "exactOptionalPropertyTypes": true,
10 | "paths": {
11 | "@@/*": ["./*"]
12 | }
13 | },
14 | "exclude": ["**/node_modules", "examples", "**/dist", ".types"],
15 | "include": [
16 | "**/*.ts",
17 | "**/*.mts",
18 | "**/*.cts",
19 | "**/.*.ts",
20 | "**/.*.mts",
21 | "**/.*.cts"
22 | ]
23 | }
24 |
--------------------------------------------------------------------------------
/src/internal/DecimalPlaces.ts:
--------------------------------------------------------------------------------
1 | export type DecimalPlaces = number;
2 |
3 | export const defaultDecimalPlaces = Infinity;
4 |
5 | export const createDecimalPlaces = (
6 | optionalDecimalPlaces: DecimalPlaces | undefined,
7 | ): DecimalPlaces => optionalDecimalPlaces ?? defaultDecimalPlaces;
8 |
9 | export const mergeOptionalDecimalPlaces = (
10 | precedingOptionalDecimalPlaces: DecimalPlaces | undefined,
11 | followingOptionalDecimalPlaces: DecimalPlaces | undefined,
12 | ): DecimalPlaces | undefined =>
13 | followingOptionalDecimalPlaces ?? precedingOptionalDecimalPlaces;
14 |
--------------------------------------------------------------------------------
/examples/next-app-router/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/next-pages-router/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 | /.pnp
6 | .pnp.js
7 | .yarn/install-state.gz
8 |
9 | # testing
10 | /coverage
11 |
12 | # next.js
13 | /.next/
14 | /out/
15 |
16 | # production
17 | /build
18 |
19 | # misc
20 | .DS_Store
21 | *.pem
22 |
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 |
28 | # local env files
29 | .env*.local
30 |
31 | # vercel
32 | .vercel
33 |
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 |
--------------------------------------------------------------------------------
/examples/next-app-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "viewport-extra-next-app-router-example",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint"
9 | },
10 | "dependencies": {
11 | "next": "15.5.7",
12 | "react": "18.3.1",
13 | "react-dom": "18.3.1",
14 | "viewport-extra": "3.0.0"
15 | },
16 | "devDependencies": {
17 | "@types/node": "22.4.2",
18 | "@types/react": "18.3.4",
19 | "@types/react-dom": "18.3.0",
20 | "typescript": "5.5.4"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/next-pages-router/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "viewport-extra-next-pages-router-example",
3 | "private": true,
4 | "scripts": {
5 | "dev": "next dev",
6 | "build": "next build",
7 | "start": "next start",
8 | "lint": "next lint"
9 | },
10 | "dependencies": {
11 | "next": "15.5.7",
12 | "react": "18.3.1",
13 | "react-dom": "18.3.1",
14 | "viewport-extra": "3.0.0"
15 | },
16 | "devDependencies": {
17 | "@types/node": "22.4.2",
18 | "@types/react": "18.3.4",
19 | "@types/react-dom": "18.3.0",
20 | "typescript": "5.5.4"
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/examples/nuxt/nuxt.config.ts:
--------------------------------------------------------------------------------
1 | import { defineNuxtConfig } from "nuxt/config";
2 |
3 | // https://nuxt.com/docs/api/configuration/nuxt-config
4 | export default defineNuxtConfig({
5 | compatibilityDate: "2025-08-15",
6 | devtools: { enabled: true },
7 | css: ["@/assets/css/globals.css"],
8 | app: {
9 | head: {
10 | title: "Usage Examples in Nuxt Application",
11 | meta: [
12 | {
13 | name: "description",
14 | content:
15 | "This example shows how to use Viewport Extra in a Nuxt application.",
16 | },
17 | ],
18 | },
19 | },
20 | });
21 |
--------------------------------------------------------------------------------
/examples/nuxt/assets/css/globals.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | font-size: inherit;
6 | }
7 |
8 | body {
9 | -webkit-text-size-adjust: 100%;
10 | text-size-adjust: 100%;
11 | font-family: "Open Sans", sans-serif;
12 | letter-spacing: 0;
13 | }
14 |
15 | a {
16 | color: inherit;
17 | }
18 |
19 | .page {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: space-between;
23 | align-items: center;
24 | width: 412px;
25 | height: 100vh;
26 | padding: 40px 0;
27 | font-size: 24px;
28 | background-color: steelblue;
29 | color: white;
30 | }
31 |
--------------------------------------------------------------------------------
/commitlint.config.ts:
--------------------------------------------------------------------------------
1 | import type { UserConfig } from "@commitlint/types";
2 |
3 | export default {
4 | extends: ["@commitlint/config-conventional"],
5 | rules: {
6 | // Do not set max length because external systems create long message
7 | // https://github.com/conventional-changelog/commitlint/issues/2930
8 | "body-max-length": [0],
9 | "body-max-line-length": [0],
10 | "footer-max-length": [0],
11 | "footer-max-line-length": [0],
12 | "header-max-length": [0],
13 | "scope-max-length": [0],
14 | "subject-max-length": [0],
15 | "type-max-length": [0],
16 | },
17 | } satisfies UserConfig;
18 |
--------------------------------------------------------------------------------
/examples/next-app-router/app/globals.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | font-size: inherit;
6 | }
7 |
8 | body {
9 | -webkit-text-size-adjust: 100%;
10 | text-size-adjust: 100%;
11 | font-family: "Open Sans", sans-serif;
12 | letter-spacing: 0;
13 | }
14 |
15 | a {
16 | color: inherit;
17 | }
18 |
19 | .page {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: space-between;
23 | align-items: center;
24 | width: 412px;
25 | height: 100vh;
26 | padding: 40px 0;
27 | font-size: 24px;
28 | background-color: steelblue;
29 | color: white;
30 | }
31 |
--------------------------------------------------------------------------------
/examples/no-framework/styles/globals.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | font-size: inherit;
6 | }
7 |
8 | body {
9 | -webkit-text-size-adjust: 100%;
10 | text-size-adjust: 100%;
11 | font-family: "Open Sans", sans-serif;
12 | letter-spacing: 0;
13 | }
14 |
15 | a {
16 | color: inherit;
17 | }
18 |
19 | .page {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: space-between;
23 | align-items: center;
24 | width: 412px;
25 | height: 100vh;
26 | padding: 40px 0;
27 | font-size: 24px;
28 | background-color: steelblue;
29 | color: white;
30 | }
31 |
--------------------------------------------------------------------------------
/examples/next-pages-router/styles/globals.css:
--------------------------------------------------------------------------------
1 | * {
2 | box-sizing: border-box;
3 | padding: 0;
4 | margin: 0;
5 | font-size: inherit;
6 | }
7 |
8 | body {
9 | -webkit-text-size-adjust: 100%;
10 | text-size-adjust: 100%;
11 | font-family: "Open Sans", sans-serif;
12 | letter-spacing: 0;
13 | }
14 |
15 | a {
16 | color: inherit;
17 | }
18 |
19 | .page {
20 | display: flex;
21 | flex-direction: column;
22 | justify-content: space-between;
23 | align-items: center;
24 | width: 412px;
25 | height: 100vh;
26 | padding: 40px 0;
27 | font-size: 24px;
28 | background-color: steelblue;
29 | color: white;
30 | }
31 |
--------------------------------------------------------------------------------
/examples/next-pages-router/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "lib": ["dom", "dom.iterable", "esnext"],
4 | "allowJs": true,
5 | "skipLibCheck": true,
6 | "strict": true,
7 | "noEmit": true,
8 | "esModuleInterop": true,
9 | "module": "esnext",
10 | "moduleResolution": "bundler",
11 | "resolveJsonModule": true,
12 | "isolatedModules": true,
13 | "jsx": "preserve",
14 | "incremental": true,
15 | "paths": {
16 | "@/*": ["./*"]
17 | },
18 | "target": "ES2017"
19 | },
20 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
21 | "exclude": ["node_modules"]
22 | }
23 |
--------------------------------------------------------------------------------
/examples/nuxt/README.md:
--------------------------------------------------------------------------------
1 | # Usage Examples in Nuxt Application
2 |
3 | **English** | [日本語](/examples/nuxt/README.ja.md)
4 |
5 | This example shows how to use Viewport Extra in a [Nuxt](https://nuxt.com/) application.
6 |
7 | ## Notes
8 |
9 | - When testing with developer tools of desktop browsers, mobile device simulation must be enabled and the viewport must be set to the desired size before navigating to a page that uses Viewport Extra. If the order is reversed, the browser may ignore the `initial-scale` setting of the `` element. This behavior is specific to simulation in developer tools and does not occur in actual mobile browsers.
10 |
--------------------------------------------------------------------------------
/examples/no-framework/README.md:
--------------------------------------------------------------------------------
1 | # Usage Examples in No-Framework Application
2 |
3 | **English** | [日本語](/examples/no-framework/README.ja.md)
4 |
5 | This example shows how to use Viewport Extra in a no-framework application.
6 |
7 | ## Notes
8 |
9 | - When testing with developer tools of desktop browsers, mobile device simulation must be enabled and the viewport must be set to the desired size before navigating to a page that uses Viewport Extra. If the order is reversed, the browser may ignore the `initial-scale` setting of the `` element. This behavior is specific to simulation in developer tools and does not occur in actual mobile browsers.
10 |
--------------------------------------------------------------------------------
/tests/modules/PlaywrightPage.ts:
--------------------------------------------------------------------------------
1 | import type { Page } from "@playwright/test";
2 |
3 | export const getViewportContentString = async (page: Page) =>
4 | await page.evaluate(
5 | ({ document }) =>
6 | document.querySelector('meta[name="viewport"]')?.getAttribute("content"),
7 | await page.evaluateHandleIndex Page
7 |-------------- 412px wide text --------------
8 | Go to another page 9 |{children}
21 |
22 | 
26 |
27 |
31 |
35 |
39 | 
43 |
44 | 
48 |
49 |
50 | たとえば、幅 412px のページを、ビューポート幅 360px のモバイル向けブラウザ (例: 縦向きの Galaxy S24 上の Chrome) で表示すると、横方向のスクロールが発生してしまいます。これは、412px 未満のビューポート幅のためにスタイルを追加することで解決できますが、その作業は面倒です。しかし、Viewport Extra でビューポートの最小幅を 412px に設定すれば、そのページは 360px にぴったり収まるように縮小され、横方向のスクロールが発生しません。スタイルを追加することなく、簡単に解決できます。
51 |
52 | ページの拡大・縮小は、`` 要素の `content` 属性の書き換えにより行われます。
53 |
54 | Viewport Extra は、`
80 | ```
81 |
82 |
83 |
84 | ##### モジュールを使用する場合
85 |
86 | ```js
87 | import("viewport-extra").then(({ apply }) => {
88 | apply([{ content: { minimumWidth: 412 } }])
89 | })
90 | ```
91 |
92 | #### `` 要素の `content` 属性の書き換え結果
93 |
94 | ##### Galaxy S24 縦向き Chrome (360px)
95 |
96 | `initial-scale=0.8737864077669902,width=412`
97 |
98 | ##### iPhone 15 縦向き Safari (393px)
99 |
100 | `initial-scale=0.9538834951456311,width=412`
101 |
102 | ##### Google Pixel 8 縦向き Chrome (412px)
103 |
104 | `initial-scale=1,width=device-width`
105 |
106 | ##### iPhone 15 横向き Safari (734px)
107 |
108 | `initial-scale=1,width=device-width`
109 |
110 | ##### iPad Pro 12.9" 縦向き Safari (1024px)
111 |
112 | `initial-scale=1,width=device-width`
113 |
114 | ### 大きなビューポート幅でページを拡大する
115 |
116 | 次のコードを含むページは、ビューポート幅が 393px を超えるモバイル向けブラウザでは拡大され、それ以外のブラウザでは拡大されません。拡大すべきかどうかの判定は、ページが表示されるときに一度だけ行われます [(参考)](#ビューポート幅が変わるときにもページを拡大縮小する) 。
117 |
118 | #### 実装
119 |
120 | ##### スクリプトを使用する場合
121 |
122 |
123 |
124 | ```html
125 |
126 |
127 |
128 |
129 | ```
130 |
131 |
132 |
133 | ##### モジュールを使用する場合
134 |
135 | ```js
136 | import("viewport-extra").then(({ apply }) => {
137 | apply([{ content: { maximumWidth: 393 } }])
138 | })
139 | ```
140 |
141 | #### `` 要素の `content` 属性の書き換え結果
142 |
143 | ##### Galaxy S24 縦向き Chrome (360px)
144 |
145 | `initial-scale=1,width=device-width`
146 |
147 | ##### iPhone 15 縦向き Safari (393px)
148 |
149 | `initial-scale=1,width=device-width`
150 |
151 | ##### Google Pixel 8 縦向き Chrome (412px)
152 |
153 | `initial-scale=1.0483460559796438,width=393`
154 |
155 | ##### iPhone 15 横向き Safari (734px)
156 |
157 | `initial-scale=1.8676844783715012,width=393`
158 |
159 | ##### iPad Pro 12.9" 縦向き Safari (1024px)
160 |
161 | `initial-scale=2.6055979643765905,width=393`
162 |
163 | ### メディアクエリごとに異なる最小幅・最大幅を設定する
164 |
165 | 次のコードを含むページは、ビューポート幅が 412px 未満または 744px 以上 1024px 未満のモバイル向けブラウザでは縮小され、それ以外のブラウザでは縮小されません。縮小すべきかどうかの判定は、ページが表示されるときに一度だけ行われます [(参考)](#ビューポート幅が変わるときにもページを拡大縮小する) 。
166 |
167 | #### 実装
168 |
169 | ##### スクリプトを使用する場合
170 |
171 |
172 |
173 | ```html
174 |
175 |
176 |
177 |
178 |
179 | ```
180 |
181 |
182 |
183 | ##### モジュールを使用する場合
184 |
185 | ```js
186 | import("viewport-extra").then(({ apply }) => {
187 | apply([
188 | { content: { minimumWidth: 412 } },
189 | { content: { minimumWidth: 1024 }, media: "(min-width: 744px)" },
190 | ])
191 | })
192 | ```
193 |
194 | #### `` 要素の `content` 属性の書き換え結果
195 |
196 | ##### Galaxy S24 縦向き Chrome (360px)
197 |
198 | `initial-scale=0.8737864077669902,width=412`
199 |
200 | ##### Google Pixel 8 縦向き Chrome (412px)
201 |
202 | `initial-scale=1,width=device-width`
203 |
204 | ##### iPad mini 第6世代 縦向き Safari (744px)
205 |
206 | `initial-scale=0.7265625,width=1024`
207 |
208 | ##### iPad Pro 12.9" 縦向き Safari (1024px)
209 |
210 | `initial-scale=1,width=device-width`
211 |
212 | ### ビューポート幅が変わるときにもページを拡大・縮小する
213 |
214 | 次のコードを含むページは、表示されるときだけでなく、ビューポート幅が変わるときにも拡大・縮小すべきかどうかの判定を行います。モバイル端末の縦向き・横向きの切り替えや、タブレットの画面分割が想定される場合に有用です。
215 |
216 | #### 実装
217 |
218 | ##### スクリプトを使用する場合
219 |
220 |
221 |
222 | ```html
223 |
224 |
225 |
230 |
231 |
252 | ```
253 |
254 |
255 |
256 | ##### モジュールを使用する場合
257 |
258 | ```js
259 | import("viewport-extra").then(({ apply }) => {
260 | const updateViewportMetaEl = () => {
261 | // 無限リサイズを回避する
262 | new ResizeObserver((_, observer) => {
263 | observer.unobserve(document.documentElement)
264 | window.addEventListener("resize", updateViewportMetaEl, { once: true })
265 | }).observe(document.documentElement)
266 |
267 | apply([
268 | { content: { minimumWidth: 412 } },
269 | { content: { minimumWidth: 744 }, media: "(min-width: 640px)" },
270 | ])
271 | }
272 | updateViewportMetaEl()
273 | })
274 | ```
275 |
276 | #### `` 要素の `content` 属性の書き換え結果
277 |
278 | ##### iPhone 15 縦向き Safari (393px)
279 |
280 | `initial-scale=0.9538834951456311,width=412`
281 |
282 | ##### iPhone 15 横向き Safari (734px)
283 |
284 | `initial-scale=0.9865591397849462,width=744`
285 |
286 | ### レガシーな環境でもページを拡大・縮小する
287 |
288 | ここまでに使用している標準的なビルドには、ES2021 の構文、および Viewport Extra v3.0.0 公開時点で [Web Platform Baseline](https://web.dev/baseline?hl=ja) の Widely Available ステージにある機能が含まれます。これらをサポートしない環境 (例: iOS Safari < 16, Android Chrome < 108) でも Viewport Extra を動作させるためには、es5 ビルドを使用します [(参考)](https://github.com/dsktschy/viewport-extra/blob/master/docs/ja/migration-from-v2.md#ビルドの選択) 。
289 |
290 | #### 実装
291 |
292 | ##### スクリプトを使用する場合
293 |
294 |
295 |
296 | ```html
297 |
298 |
299 |
300 |
301 | ```
302 |
303 |
304 |
305 | ##### モジュールを使用する場合
306 |
307 | ```js
308 | import("viewport-extra/immediate/es5").then(({ apply }) => {
309 | apply([{ content: { minimumWidth: 412 } }])
310 | })
311 | ```
312 |
313 | #### `` 要素の `content` 属性の書き換え結果
314 |
315 | ##### iPhone 7 縦向き Safari (375px)
316 |
317 | `initial-scale=0.9101941747572816,width=412`
318 |
319 | ##### iPhone 7 横向き Safari (667px)
320 |
321 | `initial-scale=1,width=device-width`
322 |
323 | ### `` 要素を使わずにページを拡大・縮小する
324 |
325 | 次のコードを含むページは、[`` 要素を使用した実装](#スクリプトを使用する場合-2)と同様に動作します。
326 |
327 | #### 実装
328 |
329 |
330 |
331 | ```html
332 |
333 |
334 |
335 |
336 |
337 | ```
338 |
339 |
340 |
341 | #### `` 要素の `content` 属性の書き換え結果
342 |
343 | ##### Galaxy S24 縦向き Chrome (360px)
344 |
345 | `initial-scale=0.8737864077669902,width=412`
346 |
347 | ##### Google Pixel 8 縦向き Chrome (412px)
348 |
349 | `initial-scale=1,width=device-width`
350 |
351 | ##### iPad mini 第6世代 縦向き Safari (744px)
352 |
353 | `initial-scale=0.7265625,width=1024`
354 |
355 | ##### iPad Pro 12.9" 縦向き Safari (1024px)
356 |
357 | `initial-scale=1,width=device-width`
358 |
359 | ## 補足
360 |
361 | - `minimum-width` / `maximum-width` の代わりに、`min-width` / `max-width` を使用できます。ただし、両方が混在する場合の動作は保証されないため、どちらか一方に統一する必要があります。
362 |
363 | ```html
364 |
365 | ```
366 |
367 | 同様に、`minimumWidth` / `maximumWidth` の代わりに、`minWidth` / `maxWidth` を使用できます。これらも、両方が混在する場合の動作は保証されないため、どちらか一方に統一する必要があります。
368 |
369 | ```js
370 | apply([{ content: { minWidth: 412, maxWidth: 640 } }])
371 | ```
372 |
373 | - 次のスタイルを併用することを推奨します。小さなモバイル端末における、ブラウザによる意図しないテキストサイズの調整を防ぎます [(参考)](https://stackoverflow.com/q/6210788) 。
374 |
375 | ```css
376 | body {
377 | -webkit-text-size-adjust: 100%;
378 | }
379 | ```
380 |
381 | - デスクトップ向けブラウザの開発者ツールで動作を確認する場合、Viewport Extra を使用するページへ移動するよりも先に、モバイル端末のシミュレーションを有効化し、ビューポートを目的のサイズに設定しておく必要があります。順番が逆である場合、ブラウザが `` 要素の `initial-scale` の設定を無視してしまう状態となります。これは、開発者ツールのシミュレーションに特有の現象であり、実際のモバイル向けブラウザでは発生しません。
382 |
--------------------------------------------------------------------------------
/docs/en/migration-from-v1.md:
--------------------------------------------------------------------------------
1 | # Migration Guide from v1 to v3
2 |
3 | **English** | [日本語](/docs/ja/migration-from-v1.md)
4 |
5 | This guide explains the differences between Viewport Extra v1 and v3. While v1 can still be used, migrating to v3 offers improvements such as avoiding page display delays and adding the feature to apply different minimum / maximum widths for each browser width.
6 |
7 | ## Highlights
8 |
9 | ```diff
10 | - v1 syntax
11 | + v3 syntax
12 | ```
13 |
14 | ### Using Script
15 |
16 |
17 |
18 | ```diff
19 |
20 | +
21 |
26 | -
27 |
28 |
29 | +
30 |
35 | -
36 |
37 |
38 |
43 | ```
44 |
45 |
46 |
47 | ### Using Module
48 |
49 | ```diff
50 | - import ViewportExtra from "viewport-extra"
51 | - new ViewportExtra(412)
52 | + import("viewport-extra").then(({ apply }) => {
53 | + apply([{ content: { minWidth: 412 } }])
54 | + })
55 |
56 | - import ViewportExtra from "viewport-extra"
57 | - new ViewportExtra({ minWidth: 412, maxWidth: 640 })
58 | + import("viewport-extra").then(({ apply }) => {
59 | + apply([{ content: { minWidth: 412, maxWidth: 640 } }])
60 | + })
61 |
62 | /* For environments that do not support ES2015+ */
63 | - import "viewport-extra"
64 | + import("viewport-extra/es5")
65 | ```
66 |
67 | ## Details
68 |
69 | - [Build Selection](#build-selection)
70 | - [Minimum / Maximum Widths Application API](#minimum--maximum-widths-application-api)
71 |
72 | ### Build Selection
73 |
74 | In v1, a single build is provided. This build requires API calls, making it difficult to use with the `async` attribute of the `
92 |
93 | ```
94 |
95 | ##### v3 Syntax
96 |
97 | Multiple builds can be selected.
98 |
99 | | File Path in URL | `meta` Element Parsing and Immediate Application | Advanced Features | Support for Legacy Environments |
100 | | ---------------------------------------------------: | :----------------------------------------------: | :---------------: | :-----------------------------: |
101 | | `/dist/viewport-extra.min.js` | - | - | - |
102 | | `/dist/es5/viewport-extra.min.js` | - | - | ✔ |
103 | | `/dist/extended/viewport-extra.min.js` | - | ✔ | - |
104 | | `/dist/extended/es5/viewport-extra.min.js` | - | ✔ | ✔ |
105 | | `/dist/immediate/viewport-extra.min.js` | ✔ | - | - |
106 | | `/dist/immediate/es5/viewport-extra.min.js` | ✔ | - | ✔ |
107 | | `/dist/immediate/extended/viewport-extra.min.js` | ✔ | ✔ | - |
108 | | `/dist/immediate/extended/es5/viewport-extra.min.js` | ✔ | ✔ | ✔ |
109 |
110 | A build that supports `meta` element parsing and immediate application, eliminating the need to call the API, can be selected and used with the `async` attribute of the `
119 | ```
120 |
121 |
122 |
123 | To ensure compatibility with environments that do not support ES2015+, selecting a build that includes `es5` in the file path in the URL is required.
124 |
125 |
126 |
127 | ```html
128 |
129 |
130 |
131 |
132 | ```
133 |
134 |
135 |
136 | If it's difficult to determine the appropriate build, the build with the file path `/dist/immediate/extended/es5/viewport-extra.min.js` in the URL includes all features.
137 |
138 |
139 |
140 | ```html
141 |
142 |
143 |
144 |
145 | ```
146 |
147 |
148 |
149 | #### Using Module
150 |
151 | ##### v1 Syntax
152 |
153 | Only a single build can be selected. The `import` declaration must be used.
154 |
155 | ```js
156 | import "viewport-extra"
157 | ```
158 |
159 | ##### v3 Syntax
160 |
161 | Multiple builds can be selected.
162 |
163 | | Module Specifier | `meta` Element Parsing and Immediate Application | Advanced Features | Support for Legacy Environments |
164 | | --------------------------------------: | :----------------------------------------------: | :---------------: | :-----------------------------: |
165 | | `viewport-extra` | - | - | - |
166 | | `viewport-extra/es5` | - | - | ✔ |
167 | | `viewport-extra/extended` | - | ✔ | - |
168 | | `viewport-extra/extended/es5` | - | ✔ | ✔ |
169 | | `viewport-extra/immediate` | ✔ | - | - |
170 | | `viewport-extra/immediate/es5` | ✔ | - | ✔ |
171 | | `viewport-extra/immediate/extended` | ✔ | ✔ | - |
172 | | `viewport-extra/immediate/extended/es5` | ✔ | ✔ | ✔ |
173 |
174 | The `import()` syntax can be used. The build with the module specifier `viewport-extra` is the lightest and ideal.
175 |
176 | ```js
177 | import("viewport-extra")
178 | ```
179 |
180 | To ensure compatibility with environments that do not support ES2015+, selecting a build that includes `es5` in the module specifier is required.
181 |
182 | ```js
183 | import("viewport-extra/es5")
184 | ```
185 |
186 | If it's difficult to determine the appropriate build, the build with the module specifier `viewport-extra/immediate/extended/es5` includes all features.
187 |
188 | ```js
189 | import("viewport-extra/immediate/extended/es5")
190 | ```
191 |
192 | ### Minimum / Maximum Widths Application API
193 |
194 | The minimum / maximum widths application API in v1, the `ViewportExtra` constructor, accepts a single pair of minimum / maximum widths as arguments. It cannot apply different minimum / maximum widths for each browser width.
195 |
196 | The minimum / maximum widths application API in v3, `apply()` function, takes multiple minimum / maximum widths along with media queries as arguments.
197 |
198 | #### Using Script
199 |
200 | ##### v1 Syntax
201 |
202 | To apply minimum / maximum widths, use the `ViewportExtra` constructor. It accepts a single minimum width or a single pair of minimum / maximum widths as arguments.
203 |
204 | ```html
205 |
208 | ```
209 |
210 | ```html
211 |
214 | ```
215 |
216 | ##### v3 Syntax
217 |
218 | To apply minimum / maximum widths, use `apply()` function.
219 |
220 | ```html
221 |
224 | ```
225 |
226 | It can accept multiple minimum / maximum widths along with media queries as arguments.
227 |
228 | ```html
229 |
235 | ```
236 |
237 | #### Using Module
238 |
239 | ##### v1 Syntax
240 |
241 | To apply minimum / maximum widths, use the `ViewportExtra` constructor. It accepts a single minimum width or a single pair of minimum / maximum widths as arguments.
242 |
243 | ```js
244 | import ViewportExtra from "viewport-extra"
245 |
246 | new ViewportExtra(412)
247 | ```
248 |
249 | ```js
250 | import ViewportExtra from "viewport-extra"
251 |
252 | new ViewportExtra({ minWidth: 412 })
253 | ```
254 |
255 | ##### v3 Syntax
256 |
257 | To apply minimum / maximum widths, use `apply()` function.
258 |
259 | ```js
260 | import("viewport-extra").then(({ apply }) => {
261 | apply([{ content: { minWidth: 412 } }])
262 | })
263 | ```
264 |
265 | It can accept multiple minimum / maximum widths along with media queries as arguments.
266 |
267 | ```js
268 | import("viewport-extra").then(({ apply }) => {
269 | apply([
270 | { content: { minWidth: 412 } }, // If media is omitted, the default is ""
271 | { content: { minWidth: 1024 }, media: "(min-width: 744px)" },
272 | ])
273 | })
274 | ```
275 |
--------------------------------------------------------------------------------
/src/internal/Content.spec.ts:
--------------------------------------------------------------------------------
1 | import { describe, expect, it } from "vitest";
2 | import {
3 | createContent,
4 | createContentAttribute,
5 | mergeOptionalPartialContent,
6 | } from "./Content.js";
7 |
8 | describe("createContent", () => {
9 | describe("case where argument has properties", () => {
10 | it("should return object that inherits properties of argument", () => {
11 | expect(
12 | createContent({
13 | width: "device-width",
14 | initialScale: 1,
15 | minimumWidth: 412,
16 | maximumWidth: 768,
17 | minWidth: 412,
18 | maxWidth: 768,
19 | interactiveWidget: "resizes-content",
20 | }),
21 | ).toStrictEqual({
22 | width: "device-width",
23 | initialScale: 1,
24 | minimumWidth: 412,
25 | maximumWidth: 768,
26 | minWidth: 412,
27 | maxWidth: 768,
28 | interactiveWidget: "resizes-content",
29 | });
30 | });
31 | });
32 |
33 | describe("case where argument is missing properties as Content type", () => {
34 | it("should return object with default values for missing properties as Content type", () => {
35 | expect(createContent({})).toStrictEqual({
36 | width: "device-width",
37 | initialScale: 1,
38 | minimumWidth: 0,
39 | maximumWidth: Infinity,
40 | });
41 | });
42 | });
43 |
44 | describe("case where argument is undefined", () => {
45 | it("should return object with default values of Content type", () => {
46 | expect(createContent()).toStrictEqual({
47 | width: "device-width",
48 | initialScale: 1,
49 | minimumWidth: 0,
50 | maximumWidth: Infinity,
51 | });
52 | });
53 | });
54 | });
55 |
56 | describe("mergeOptionalPartialContent", () => {
57 | describe("case where only first argument is not undefined", () => {
58 | it("should return first argument", () => {
59 | expect(
60 | mergeOptionalPartialContent(
61 | {
62 | width: "device-width",
63 | minimumWidth: 412,
64 | maxWidth: 768,
65 | interactiveWidget: "resizes-content",
66 | },
67 | undefined,
68 | ),
69 | ).toStrictEqual({
70 | width: "device-width",
71 | minimumWidth: 412,
72 | maxWidth: 768,
73 | interactiveWidget: "resizes-content",
74 | });
75 | });
76 | });
77 |
78 | describe("case where only second argument is not undefined", () => {
79 | it("should return second argument", () => {
80 | expect(
81 | mergeOptionalPartialContent(undefined, {
82 | width: "device-width",
83 | minimumWidth: 412,
84 | maxWidth: 768,
85 | interactiveWidget: "resizes-content",
86 | }),
87 | ).toStrictEqual({
88 | width: "device-width",
89 | minimumWidth: 412,
90 | maxWidth: 768,
91 | interactiveWidget: "resizes-content",
92 | });
93 | });
94 | });
95 |
96 | describe("case where first and second arguments are not undefined", () => {
97 | it("should return object that first and second arguments are merged", () => {
98 | expect(
99 | mergeOptionalPartialContent(
100 | {
101 | width: "device-width",
102 | initialScale: 1,
103 | minWidth: 412,
104 | maxWidth: 768,
105 | },
106 | {
107 | minimumWidth: 412,
108 | maximumWidth: 768,
109 | interactiveWidget: "resizes-content",
110 | },
111 | ),
112 | ).toStrictEqual({
113 | width: "device-width",
114 | initialScale: 1,
115 | minimumWidth: 412,
116 | maximumWidth: 768,
117 | minWidth: 412,
118 | maxWidth: 768,
119 | interactiveWidget: "resizes-content",
120 | });
121 | });
122 |
123 | describe("case where first and second arguments have same properties", () => {
124 | it("should return object that values of second argument are used", () => {
125 | expect(
126 | mergeOptionalPartialContent(
127 | {
128 | width: "device-width",
129 | initialScale: 1,
130 | interactiveWidget: "resizes-content",
131 | },
132 | {
133 | width: 412,
134 | initialScale: 2,
135 | interactiveWidget: "overlays-content",
136 | },
137 | ),
138 | ).toStrictEqual({
139 | width: 412,
140 | initialScale: 2,
141 | interactiveWidget: "overlays-content",
142 | });
143 | });
144 | });
145 | });
146 |
147 | describe("case where first and second arguments are undefined", () => {
148 | it("should return undefined", () => {
149 | expect(mergeOptionalPartialContent(undefined, undefined)).toBe(undefined);
150 | });
151 | });
152 | });
153 |
154 | describe("createContentAttribute", () => {
155 | describe("case where all arguments are undefined", () => {
156 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in default value of Content type", () => {
157 | expect(createContentAttribute()).toBe(
158 | "initial-scale=1,width=device-width",
159 | );
160 | });
161 | });
162 |
163 | describe("case where second argument is greater than minimumWidth and less than maximumWidth in first argument", () => {
164 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in first argument", () => {
165 | expect(
166 | createContentAttribute(
167 | {
168 | width: "device-width",
169 | initialScale: 2,
170 | minimumWidth: 412,
171 | maximumWidth: 768,
172 | interactiveWidget: "resizes-content",
173 | },
174 | 640,
175 | Infinity,
176 | ),
177 | ).toBe(
178 | "initial-scale=2,interactive-widget=resizes-content,width=device-width",
179 | );
180 | });
181 | });
182 |
183 | describe("case where second argument is less than minimumWidth in first argument", () => {
184 | it("should compute width and initialScale from first and second argument to fit minimum width into viewport, create string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth, and return it", () => {
185 | expect(
186 | createContentAttribute(
187 | {
188 | width: "device-width",
189 | initialScale: 2,
190 | minimumWidth: 412,
191 | maximumWidth: 768,
192 | interactiveWidget: "resizes-content",
193 | },
194 | 375,
195 | Infinity,
196 | ),
197 | ).toBe(
198 | "initial-scale=1.8203883495145632,interactive-widget=resizes-content,width=412",
199 | );
200 | });
201 | });
202 |
203 | describe("case where second argument is greater than maximumWidth in first argument", () => {
204 | it("should compute width and initialScale from first and second argument to fit maximum width into viewport, create string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth, and return it", () => {
205 | expect(
206 | createContentAttribute(
207 | {
208 | width: "device-width",
209 | initialScale: 2,
210 | minimumWidth: 412,
211 | maximumWidth: 768,
212 | interactiveWidget: "resizes-content",
213 | },
214 | 1024,
215 | Infinity,
216 | ),
217 | ).toBe(
218 | "initial-scale=2.6666666666666665,interactive-widget=resizes-content,width=768",
219 | );
220 | });
221 | });
222 |
223 | describe("case where minimumWidth is greater than maximumWidth in first argument", () => {
224 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in first argument", () => {
225 | expect(
226 | createContentAttribute(
227 | {
228 | width: "device-width",
229 | initialScale: 2,
230 | minimumWidth: 768,
231 | maximumWidth: 412,
232 | interactiveWidget: "resizes-content",
233 | },
234 | 375,
235 | Infinity,
236 | ),
237 | ).toBe(
238 | "initial-scale=2,interactive-widget=resizes-content,width=device-width",
239 | );
240 | });
241 | });
242 |
243 | describe("case where second argument is greater than minWidth and less than maxWidth in first argument", () => {
244 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in first argument", () => {
245 | expect(
246 | createContentAttribute(
247 | {
248 | width: "device-width",
249 | initialScale: 2,
250 | minimumWidth: 0,
251 | maximumWidth: Infinity,
252 | minWidth: 412,
253 | maxWidth: 768,
254 | interactiveWidget: "resizes-content",
255 | },
256 | 640,
257 | Infinity,
258 | ),
259 | ).toBe(
260 | "initial-scale=2,interactive-widget=resizes-content,width=device-width",
261 | );
262 | });
263 | });
264 |
265 | describe("case where second argument is less than minWidth in first argument", () => {
266 | it("should compute width and initialScale from first and second argument to fit minimum width into viewport, create string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth, and return it", () => {
267 | expect(
268 | createContentAttribute(
269 | {
270 | width: "device-width",
271 | initialScale: 2,
272 | minimumWidth: 0,
273 | maximumWidth: Infinity,
274 | minWidth: 412,
275 | maxWidth: 768,
276 | interactiveWidget: "resizes-content",
277 | },
278 | 375,
279 | Infinity,
280 | ),
281 | ).toBe(
282 | "initial-scale=1.8203883495145632,interactive-widget=resizes-content,width=412",
283 | );
284 | });
285 | });
286 |
287 | describe("case where second argument is greater than maxWidth in first argument", () => {
288 | it("should compute width and initialScale from first and second argument to fit maximum width into viewport, create string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth, and return it", () => {
289 | expect(
290 | createContentAttribute(
291 | {
292 | width: "device-width",
293 | initialScale: 2,
294 | minimumWidth: 0,
295 | maximumWidth: Infinity,
296 | minWidth: 412,
297 | maxWidth: 768,
298 | interactiveWidget: "resizes-content",
299 | },
300 | 1024,
301 | Infinity,
302 | ),
303 | ).toBe(
304 | "initial-scale=2.6666666666666665,interactive-widget=resizes-content,width=768",
305 | );
306 | });
307 | });
308 |
309 | describe("case where minWidth is greater than maxWidth in first argument", () => {
310 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in first argument", () => {
311 | expect(
312 | createContentAttribute(
313 | {
314 | width: "device-width",
315 | initialScale: 2,
316 | minimumWidth: 0,
317 | maximumWidth: Infinity,
318 | minWidth: 768,
319 | maxWidth: 412,
320 | interactiveWidget: "resizes-content",
321 | },
322 | 375,
323 | Infinity,
324 | ),
325 | ).toBe(
326 | "initial-scale=2,interactive-widget=resizes-content,width=device-width",
327 | );
328 | });
329 | });
330 |
331 | describe("case where width is number in first argument", () => {
332 | it("should return string where keys and values are connected with equals and properties are connected with commas for properties other than minimumWidth, maximumWidth, minWidth, and maxWidth in first argument", () => {
333 | expect(
334 | createContentAttribute(
335 | {
336 | width: 1024,
337 | initialScale: 2,
338 | minimumWidth: 412,
339 | maximumWidth: 768,
340 | interactiveWidget: "resizes-content",
341 | },
342 | 1024,
343 | Infinity,
344 | ),
345 | ).toBe("initial-scale=2,interactive-widget=resizes-content,width=1024");
346 | });
347 | });
348 |
349 | describe("case where third argument is finite number", () => {
350 | it("should truncate numbers in returned value to decimal places specified as third argument when converting to string after computing", () => {
351 | expect(
352 | createContentAttribute(
353 | {
354 | width: "device-width",
355 | initialScale: 1.123456789,
356 | minimumWidth: 412,
357 | maximumWidth: Infinity,
358 | minimumScale: 0.123456789,
359 | },
360 | 375,
361 | 6,
362 | ),
363 | ).toBe("initial-scale=1.022563,minimum-scale=0.123456,width=412");
364 | });
365 | });
366 |
367 | describe("case where third argument is Infinity", () => {
368 | it("should not truncate numbers in return value", () => {
369 | expect(
370 | createContentAttribute(
371 | {
372 | width: "device-width",
373 | initialScale: 1.123456789,
374 | minimumWidth: 412,
375 | maximumWidth: Infinity,
376 | minimumScale: 0.123456789,
377 | },
378 | 375,
379 | Infinity,
380 | ),
381 | ).toBe(
382 | "initial-scale=1.0225638249393205,minimum-scale=0.123456789,width=412",
383 | );
384 | });
385 | });
386 | });
387 |
--------------------------------------------------------------------------------
/tests/specs/e2e/side-effects.spec.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from "@playwright/test";
2 | import { getViewportSize } from "../../modules/PlaywrightFullProjectList.js";
3 | import {
4 | getViewportContentString,
5 | waitForAssetScriptComplete,
6 | } from "../../modules/PlaywrightPage.js";
7 |
8 | for (const {
9 | extended,
10 | typescriptTarget,
11 | format,
12 | minified,
13 | outputScriptSrc,
14 | assetScriptSrc,
15 | } of [
16 | {
17 | extended: false,
18 | typescriptTarget: "es2021",
19 | format: "es",
20 | minified: false,
21 | outputScriptSrc: "/immediate/viewport-extra.js",
22 | assetScriptSrc: "/assets/scripts/e2e/immediate/es/trigger-side-effects.js",
23 | },
24 | {
25 | extended: false,
26 | typescriptTarget: "es2021",
27 | format: "cjs",
28 | minified: false,
29 | outputScriptSrc: "/immediate/viewport-extra.js",
30 | assetScriptSrc: "/assets/scripts/e2e/immediate/cjs/trigger-side-effects.js",
31 | },
32 | {
33 | extended: false,
34 | typescriptTarget: "es2021",
35 | format: "iife",
36 | minified: false,
37 | outputScriptSrc: "/immediate/viewport-extra.js",
38 | assetScriptSrc:
39 | "/assets/scripts/e2e/immediate/iife/trigger-side-effects.js",
40 | },
41 | {
42 | extended: false,
43 | typescriptTarget: "es2021",
44 | format: "iife",
45 | minified: true,
46 | outputScriptSrc: "/immediate/viewport-extra.min.js",
47 | assetScriptSrc:
48 | "/assets/scripts/e2e/immediate/iife/trigger-side-effects.js",
49 | },
50 | {
51 | extended: false,
52 | typescriptTarget: "es5",
53 | format: "es",
54 | minified: false,
55 | outputScriptSrc: "/immediate/es5/viewport-extra.js",
56 | assetScriptSrc:
57 | "/assets/scripts/e2e/immediate/es/es5/trigger-side-effects.js",
58 | },
59 | {
60 | extended: false,
61 | typescriptTarget: "es5",
62 | format: "cjs",
63 | minified: false,
64 | outputScriptSrc: "/immediate/es5/viewport-extra.js",
65 | assetScriptSrc:
66 | "/assets/scripts/e2e/immediate/cjs/es5/trigger-side-effects.js",
67 | },
68 | {
69 | extended: false,
70 | typescriptTarget: "es5",
71 | format: "iife",
72 | minified: false,
73 | outputScriptSrc: "/immediate/es5/viewport-extra.js",
74 | assetScriptSrc:
75 | "/assets/scripts/e2e/immediate/iife/es5/trigger-side-effects.js",
76 | },
77 | {
78 | extended: false,
79 | typescriptTarget: "es5",
80 | format: "iife",
81 | minified: true,
82 | outputScriptSrc: "/immediate/es5/viewport-extra.min.js",
83 | assetScriptSrc:
84 | "/assets/scripts/e2e/immediate/iife/es5/trigger-side-effects.js",
85 | },
86 | {
87 | extended: true,
88 | typescriptTarget: "es2021",
89 | format: "es",
90 | minified: false,
91 | outputScriptSrc: "/immediate/extended/viewport-extra.js",
92 | assetScriptSrc:
93 | "/assets/scripts/e2e/immediate/extended/es/trigger-side-effects.js",
94 | },
95 | {
96 | extended: true,
97 | typescriptTarget: "es2021",
98 | format: "cjs",
99 | minified: false,
100 | outputScriptSrc: "/immediate/extended/viewport-extra.js",
101 | assetScriptSrc:
102 | "/assets/scripts/e2e/immediate/extended/cjs/trigger-side-effects.js",
103 | },
104 | {
105 | extended: true,
106 | typescriptTarget: "es2021",
107 | format: "iife",
108 | minified: false,
109 | outputScriptSrc: "/immediate/extended/viewport-extra.js",
110 | assetScriptSrc:
111 | "/assets/scripts/e2e/immediate/extended/iife/trigger-side-effects.js",
112 | },
113 | {
114 | extended: true,
115 | typescriptTarget: "es2021",
116 | format: "iife",
117 | minified: true,
118 | outputScriptSrc: "/immediate/extended/viewport-extra.min.js",
119 | assetScriptSrc:
120 | "/assets/scripts/e2e/immediate/extended/iife/trigger-side-effects.js",
121 | },
122 | {
123 | extended: true,
124 | typescriptTarget: "es5",
125 | format: "es",
126 | minified: false,
127 | outputScriptSrc: "/immediate/extended/es5/viewport-extra.js",
128 | assetScriptSrc:
129 | "/assets/scripts/e2e/immediate/extended/es/es5/trigger-side-effects.js",
130 | },
131 | {
132 | extended: true,
133 | typescriptTarget: "es5",
134 | format: "cjs",
135 | minified: false,
136 | outputScriptSrc: "/immediate/extended/es5/viewport-extra.js",
137 | assetScriptSrc:
138 | "/assets/scripts/e2e/immediate/extended/cjs/es5/trigger-side-effects.js",
139 | },
140 | {
141 | extended: true,
142 | typescriptTarget: "es5",
143 | format: "iife",
144 | minified: false,
145 | outputScriptSrc: "/immediate/extended/es5/viewport-extra.js",
146 | assetScriptSrc:
147 | "/assets/scripts/e2e/immediate/extended/iife/es5/trigger-side-effects.js",
148 | },
149 | {
150 | extended: true,
151 | typescriptTarget: "es5",
152 | format: "iife",
153 | minified: true,
154 | outputScriptSrc: "/immediate/extended/es5/viewport-extra.min.js",
155 | assetScriptSrc:
156 | "/assets/scripts/e2e/immediate/extended/iife/es5/trigger-side-effects.js",
157 | },
158 | ]) {
159 | test.describe(`using ${minified ? "minified " : ""}${typescriptTarget} ${format} output for ${extended ? "extended " : ""}immediate entry`, () => {
160 | test.describe("updating content attribute of viewport meta element", () => {
161 | test.beforeEach(async ({ page }) => {
162 | await page.goto("/tests/__fixtures__/src/dummy.html");
163 | });
164 |
165 | test.describe("case where (data-extra-)content attribute with minimum-width, data-(extra-)media attribute are set in viewport(-extra) meta element", () => {
166 | test("width is updated to minimum width and initial-scale is updated to value that fits minimum width into viewport, on browser whose viewport width is less than minimum width. Last minimum-width in matching media queries is used", async ({
167 | page,
168 | viewport,
169 | }, { config: { projects } }) => {
170 | const smViewportWidth =
171 | getViewportSize(projects, "sm")?.use.viewport?.width ?? 0;
172 | const xlViewportWidth =
173 | getViewportSize(projects, "xl")?.use.viewport?.width ?? 0;
174 | const documentClientWidth = viewport ? viewport.width : undefined;
175 | await page.setContent(`
176 |
177 |
178 |
179 |
180 |
26 |
43 |
48 |