noNonScalableViewport

JSX and TSX

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.7
• Diagnostic Category: lint/nursery/noNonScalableViewport
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• Sources:
  • Inspired from @html-eslint/no-non-scalable-viewport

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noNonScalableViewport": "error"
      }
    }
  }
}

Description

Disallow disabling zoom with user-scalable=no in the <meta name="viewport"> element.

Disabling zoom can make page content difficult to read for people with low vision.

See WCAG 1.4.4 and the html-eslint rule for details.

Examples

Invalid

<meta name="viewport" content="width=device-width, user-scalable=no" />

code-block.jsx:1:23 lint/nursery/noNonScalableViewport ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The viewport disables user scaling.
  
  > 1 │ <meta name=“viewport” content=“width=device-width, user-scalable=no” />
      │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Disabling zoom can make page content difficult to read for people with low vision.
  
  ℹ Remove the user-scalable=no directive from the content attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

<meta name={"viewport"} content={"user-scalable=no"} />

code-block.jsx:1:25 lint/nursery/noNonScalableViewport ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The viewport disables user scaling.
  
  > 1 │ <meta name={“viewport”} content={“user-scalable=no”} />
      │                         ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Disabling zoom can make page content difficult to read for people with low vision.
  
  ℹ Remove the user-scalable=no directive from the content attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

Valid

<>
  <meta name="viewport" content="width=device-width, user-scalable=yes" />
  <meta name="viewport" content="width=device-width" />
  <Meta name="viewport" content="user-scalable=no" />
</>

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases

HTML

Caution

This rule is part of the nursery group. This means that it is experimental and the behavior can change at any time.

Summary

• Rule available since: v2.5.7
• Diagnostic Category: lint/nursery/noNonScalableViewport
• This rule doesn’t have a fix.
• The default severity of this rule is error.
• Sources:
  • Same as @html-eslint/no-non-scalable-viewport

How to configure

biome.json

{
  "linter": {
    "rules": {
      "nursery": {
        "noNonScalableViewport": "error"
      }
    }
  }
}

Description

Disallow disabling zoom with user-scalable=no in the <meta name="viewport"> element.

Disabling zoom can make page content difficult to read for people with low vision.

See WCAG 1.4.4 and the html-eslint rule for details.

Examples

Invalid

<meta name="viewport" content="width=device-width, user-scalable=no" />

code-block.html:1:23 lint/nursery/noNonScalableViewport ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The viewport disables user scaling.
  
  > 1 │ <meta name=“viewport” content=“width=device-width, user-scalable=no” />
      │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Disabling zoom can make page content difficult to read for people with low vision.
  
  ℹ Remove the user-scalable=no directive from the content attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

<meta name="viewport" content="user-scalable = no, width=device-width" />

code-block.html:1:23 lint/nursery/noNonScalableViewport ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ The viewport disables user scaling.
  
  > 1 │ <meta name=“viewport” content=“user-scalable = no, width=device-width” />
      │                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ Disabling zoom can make page content difficult to read for people with low vision.
  
  ℹ Remove the user-scalable=no directive from the content attribute.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  

Valid

<meta name="viewport" content="width=device-width, user-scalable=yes" />
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=nope" />

Related links

• Disable a rule
• Configure the code fix
• Rule options
• Source Code (Edit this Page)
• Test Cases