Skip to content

Commit 0edc9d0

Browse files
tombrunetWilcoFierscarlosapaduarte
authored
b4f0c3: Adjust meta viewport applicability based on properties defined (#1835)
* Adjust meta applicability based on properties defined * Change scale from 600% to 200% for Pass 2 Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> * Rephrase applicability * Apply suggestions from code review Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com> * Apply suggestions from code review Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Wilco Fiers <WilcoFiers@users.noreply.github.com> Co-authored-by: Carlos Duarte <carlosapaduarte@gmail.com>
1 parent bf75800 commit 0edc9d0

File tree

1 file changed

+41
-38
lines changed

1 file changed

+41
-38
lines changed

‎_rules/meta-viewport-b4f0c3.md‎

Lines changed: 41 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -22,11 +22,14 @@ acknowledgments:
2222

2323
## Applicability
2424

25-
This rule applies to each `content` attribute on a `meta` element with a `name` [attribute value][] of `viewport`.
25+
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:
26+
27+
- the `content` [attribute value][] has the `user-scalable` property; or
28+
- the `content` [attribute value][] has the `maximum-scale` property.
2629

2730
## Expectation 1
2831

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

3134
## Expectation 2
3235

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

6265
#### Passed Example 1
6366

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

6669
```html
6770
<html>
6871
<head>
6972
<title>Simple page showing random text</title>
70-
<meta name="viewport" content="width=device-width" />
73+
<meta name="viewport" content="user-scalable=yes" />
7174
</head>
7275
<body>
7376
<p>
@@ -79,13 +82,13 @@ This viewport `meta` element does not prevent user scaling because it does not s
7982

8083
#### Passed Example 2
8184

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

8487
```html
8588
<html>
8689
<head>
8790
<title>Simple page showing random text</title>
88-
<meta name="viewport" content="user-scalable=yes" />
91+
<meta name="viewport" content="maximum-scale=2.0" />
8992
</head>
9093
<body>
9194
<p>
@@ -97,13 +100,13 @@ This viewport `meta` element does not prevent user scaling because it has `user-
97100

98101
#### Passed Example 3
99102

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

102105
```html
103106
<html>
104107
<head>
105108
<title>Simple page showing random text</title>
106-
<meta name="viewport" content="maximum-scale=6.0" />
109+
<meta name="viewport" content="maximum-scale=-1" />
107110
</head>
108111
<body>
109112
<p>
@@ -113,15 +116,17 @@ This viewport `meta` element allows users to scale content up to 600% because it
113116
</html>
114117
```
115118

116-
#### Passed Example 4
119+
### Failed
120+
121+
#### Failed Example 1
117122

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

120125
```html
121126
<html>
122127
<head>
123128
<title>Simple page showing random text</title>
124-
<meta name="viewport" content="" />
129+
<meta name="viewport" content="user-scalable=no" />
125130
</head>
126131
<body>
127132
<p>
@@ -131,15 +136,15 @@ This viewport `meta` element does not prevent user scaling because it does not s
131136
</html>
132137
```
133138

134-
#### Passed Example 5
139+
#### Failed Example 2
135140

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

138143
```html
139144
<html>
140145
<head>
141146
<title>Simple page showing random text</title>
142-
<meta name="viewport" content="maximum-scale=-1" />
147+
<meta name="viewport" content="user-scalable=yes, initial-scale=0.8, maximum-scale=1.5" />
143148
</head>
144149
<body>
145150
<p>
@@ -149,17 +154,15 @@ This viewport `meta` element does not prevent user scaling because it has `maxim
149154
</html>
150155
```
151156

152-
### Failed
153-
154-
#### Failed Example 1
157+
#### Failed Example 3
155158

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

158161
```html
159162
<html>
160163
<head>
161164
<title>Simple page showing random text</title>
162-
<meta name="viewport" content="user-scalable=no" />
165+
<meta name="viewport" content="maximum-scale=1.0" />
163166
</head>
164167
<body>
165168
<p>
@@ -169,15 +172,15 @@ This viewport `meta` element prevents user scaling because it has `user-scalable
169172
</html>
170173
```
171174

172-
#### Failed Example 2
175+
#### Failed Example 4
173176

174-
This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.5.
177+
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.
175178

176179
```html
177180
<html>
178181
<head>
179182
<title>Simple page showing random text</title>
180-
<meta name="viewport" content="user-scalable=yes, initial-scale=0.8, maximum-scale=1.5" />
183+
<meta name="viewport" content="maximum-scale=yes" />
181184
</head>
182185
<body>
183186
<p>
@@ -187,15 +190,17 @@ This viewport `meta` element prevents users to scale content up to 200% because
187190
</html>
188191
```
189192

190-
#### Failed Example 3
193+
### Inapplicable
191194

192-
This viewport `meta` element prevents users to scale content up to 200% because it has `maximum-scale` set to 1.0.
195+
#### Inapplicable Example 1
196+
197+
There is no viewport `meta` element.
193198

194199
```html
195200
<html>
196201
<head>
197-
<title>Simple page showing random text</title>
198-
<meta name="viewport" content="maximum-scale=1.0" />
202+
<title>Lorem ipsum</title>
203+
<meta charset="UTF-8" />
199204
</head>
200205
<body>
201206
<p>
@@ -205,15 +210,15 @@ This viewport `meta` element prevents users to scale content up to 200% because
205210
</html>
206211
```
207212

208-
#### Failed Example 4
213+
#### Inapplicable Example 2
209214

210-
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.
215+
This viewport `meta` element does not have a `content` attribute.
211216

212217
```html
213218
<html>
214219
<head>
215220
<title>Simple page showing random text</title>
216-
<meta name="viewport" content="maximum-scale=yes" />
221+
<meta name="viewport" />
217222
</head>
218223
<body>
219224
<p>
@@ -223,17 +228,15 @@ This viewport `meta` element prevents users to scale content up to 200% because
223228
</html>
224229
```
225230

226-
### Inapplicable
227-
228-
#### Inapplicable Example 1
231+
#### Inapplicable Example 3
229232

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

232235
```html
233236
<html>
234237
<head>
235-
<title>Lorem ipsum</title>
236-
<meta charset="UTF-8" />
238+
<title>Simple page showing random text</title>
239+
<meta name="viewport" content="width=device-width" />
237240
</head>
238241
<body>
239242
<p>
@@ -243,15 +246,15 @@ There is no viewport `meta` element.
243246
</html>
244247
```
245248

246-
#### Inapplicable Example 2
249+
#### Inapplicable Example 4
247250

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

250253
```html
251254
<html>
252255
<head>
253256
<title>Simple page showing random text</title>
254-
<meta name="viewport" />
257+
<meta name="viewport" content="" />
255258
</head>
256259
<body>
257260
<p>

0 commit comments

Comments
 (0)