8

W3C don't validate my viewport meta tag any idea why?

<title>DIDIx13</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" /> 
<!-- Throws a warning "Consider avoiding viewport values that prevent users from resizing documents." -->
<meta name="keywords" content="DIDIx13" >
<meta name="description" content="I'm Darwin and welcome to my website" >
DIDIx13
  • 505
  • 1
  • 7
  • 23
  • 3
    As the validator says `Consider avoiding viewport values that prevent users from resizing documents.` But IMHO you want that. People get enerved when on mobile it zooms the website. – deEr. Apr 16 '18 at 14:05
  • @AjAX. [W3schools](https://www.w3schools.com/css/css_rwd_viewport.asp) has a perfect example of viewport and my website should be responsive. Why would a validator so known recommend this? – DIDIx13 Apr 16 '18 at 14:07
  • `Responsive != Ability to zoom.` The validator is — not — only so known. It is the validator of the maker of the `HTML Protocol`. But inventing things does — not — always make you the best user of it. – deEr. Apr 16 '18 at 14:09
  • 1
    W3C !== W3Schools. W3Schools is generally a load of old ####. At least it used to be. – ggdx Apr 16 '18 at 14:10
  • @ggdx I know that and it's not useful to my question. – DIDIx13 Apr 16 '18 at 14:25
  • For me I always want the `App feeling` without the zoom. No high visitor site uses zoom in `viewports`. – deEr. Apr 16 '18 at 14:28
  • 1
    That said, recommended is zooming on non-for-mobile-designed sites. You want to have big buttons and all that. Here W3C probably checks if you know what you are doing. Keep in mind. – deEr. Apr 16 '18 at 14:40
  • Why downvotes? What can I improve? – DIDIx13 Apr 18 '18 at 11:58

2 Answers2

12

TL;DR

Remove "user-scalable=no" and now the validator is fully ok!

I've found out the purpose of "user-scalable=no", thanks to this answer.

Actually "user-scalable=no" prevents the user from zooming. And it allows the browser to gain 300ms per click.

300ms per click? That's pretty damn good! I should let "user-scalable=no"

But this is no longer the case, according to efheng's answer.

<meta name="viewport" content="width=device-width"> is enough to remove 300ms delay.

Community
  • 1
  • 1
DIDIx13
  • 505
  • 1
  • 7
  • 23
2

Pay attention that any -scale property also triggers that warning

Therefore you should remove all of the following properties, if existent

  • user-scalable
  • initial-scale
  • maximum-scale
  • minimum-scale
João Pimentel Ferreira
  • 9,166
  • 6
  • 52
  • 67