Skip to content

b4f0c3: Adjust meta viewport applicability based on properties defined #1835

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jun 23, 2022
Merged

b4f0c3: Adjust meta viewport applicability based on properties defined #1835

Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
b39ddfb
Adjust meta applicability based on properties defined
tombrunet Apr 19, 2022
5c6a5e6
Change scale from 600% to 200% for Pass 2
tombrunet Apr 28, 2022
adf49d6
Merge branch 'develop' into viewport-na
tombrunet May 5, 2022
64f6a59
Rephrase applicability
tombrunet May 26, 2022
2256fee
Merge branch 'develop' into viewport-na
tombrunet May 26, 2022
1d3d377
Apply suggestions from code review
tombrunet Jun 2, 2022
48ff824
Merge branch 'develop' into viewport-na
tombrunet Jun 2, 2022
15db6de
Apply suggestions from code review
tombrunet Jun 3, 2022
49c7390
Merge branch 'develop' into viewport-na
tombrunet Jun 3, 2022
c3d3ed0
Merge branch 'develop' into viewport-na
WilcoFiers Jun 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
79 changes: 41 additions & 38 deletions _rules/meta-viewport-b4f0c3.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,14 @@ acknowledgments:

## Applicability

This rule applies to each `content` attribute on a `meta` element with a `name` [attribute value][] of `viewport`.
This rule applies to each `content` attribute on a `meta` element with a `name` [attribute value][] of `viewport` for which at least one of the following is true:

- the `content` [attribute value][] has the `user-scalable` property; or
- the `content` [attribute value][] has the `maximum-scale` property.

## Expectation 1

For each test target, the [attribute value][] does hot have a `user-scalable` property with a value of `no`.
For each test target, the [attribute value][] does not have a `user-scalable` property with a value of `no`.

## Expectation 2

Expand Down Expand Up @@ -61,13 +64,13 @@ This rule is designed specifically for [1.4.4 Resize text][sc144], which require

#### Passed Example 1

This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` and `user-scalable` values.
This viewport `meta` element does not prevent user scaling because it has `user-scalable` set to `yes`.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="width=device-width" />
<meta name="viewport" content="user-scalable=yes" />
</head>
<body>
<p>
Expand All @@ -79,13 +82,13 @@ This viewport `meta` element does not prevent user scaling because it does not s

#### Passed Example 2

This viewport `meta` element does not prevent user scaling because it has `user-scalable` set to `yes`.
This viewport `meta` element allows users to scale content up to 200% because it has `maximum-scale` set to 2.0.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="user-scalable=yes" />
<meta name="viewport" content="maximum-scale=2.0" />
</head>
<body>
<p>
Expand All @@ -97,13 +100,13 @@ This viewport `meta` element does not prevent user scaling because it has `user-

#### Passed Example 3

This viewport `meta` element allows users to scale content up to 600% because it has `maximum-scale` set to 6.0.
This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1 which results in this value being dropped.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="maximum-scale=6.0" />
<meta name="viewport" content="maximum-scale=-1" />
</head>
<body>
<p>
Expand All @@ -113,15 +116,17 @@ This viewport `meta` element allows users to scale content up to 600% because it
</html>
```

#### Passed Example 4
### Failed

#### Failed Example 1

This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` and `user-scalable` values.
This viewport `meta` element prevents user scaling because it has `user-scalable` set to `no`.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="" />
<meta name="viewport" content="user-scalable=no" />
</head>
<body>
<p>
Expand All @@ -131,15 +136,15 @@ This viewport `meta` element does not prevent user scaling because it does not s
</html>
```

#### Passed Example 5
#### Failed Example 2

This viewport `meta` element does not prevent user scaling because it has `maximum-scale` set to -1 which results in this value being dropped.
This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.5.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="maximum-scale=-1" />
<meta name="viewport" content="user-scalable=yes, initial-scale=0.8, maximum-scale=1.5" />
</head>
<body>
<p>
Expand All @@ -149,17 +154,15 @@ This viewport `meta` element does not prevent user scaling because it has `maxim
</html>
```

### Failed

#### Failed Example 1
#### Failed Example 3

This viewport `meta` element prevents user scaling because it has `user-scalable` set to `no`.
This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.0.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="user-scalable=no" />
<meta name="viewport" content="maximum-scale=1.0" />
</head>
<body>
<p>
Expand All @@ -169,15 +172,15 @@ This viewport `meta` element prevents user scaling because it has `user-scalable
</html>
```

#### Failed Example 2
#### Failed Example 4

This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.5.
This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to `yes` which translates to 1.0.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="user-scalable=yes, initial-scale=0.8, maximum-scale=1.5" />
<meta name="viewport" content="maximum-scale=yes" />
</head>
<body>
<p>
Expand All @@ -187,15 +190,17 @@ This viewport `meta` element prevents users to scale content up to 200% because
</html>
```

#### Failed Example 3
### Inapplicable

This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.0.
#### Inapplicable Example 1

There is no viewport `meta` element.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="maximum-scale=1.0" />
<title>Lorem ipsum</title>
<meta charset="UTF-8" />
</head>
<body>
<p>
Expand All @@ -205,15 +210,15 @@ This viewport `meta` element prevents users to scale content up to 200% because
</html>
```

#### Failed Example 4
#### Inapplicable Example 2

This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to `yes` which translates to 1.0.
This viewport `meta` element does not have a `content` attribute.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" content="maximum-scale=yes" />
<meta name="viewport" />
</head>
<body>
<p>
Expand All @@ -223,17 +228,15 @@ This viewport `meta` element prevents users to scale content up to 200% because
</html>
```

### Inapplicable

#### Inapplicable Example 1
#### Inapplicable Example 3

There is no viewport `meta` element.
This viewport `meta` element does not specify the `maximum-scale` nor `user-scalable` values.

```html
<html>
<head>
<title>Lorem ipsum</title>
<meta charset="UTF-8" />
<title>Simple page showing random text</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<p>
Expand All @@ -243,15 +246,15 @@ There is no viewport `meta` element.
</html>
```

#### Inapplicable Example 2
#### Inapplicable Example 4

This viewport `meta` element does not have a `content` attribute.
This viewport `meta` element does not prevent user scaling because it does not specify the `maximum-scale` nor `user-scalable` values.

```html
<html>
<head>
<title>Simple page showing random text</title>
<meta name="viewport" />
<meta name="viewport" content="" />
</head>
<body>
<p>
Expand Down