7

I have tried using the following meta view port tag to prevent browser zooming:

<meta content='width=device-width, height=device-height, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,target-densitydpi=device-dpi' name='viewport' />

This doesn't work though. I know that it is possible because my zooming is blocked on this website: futurism.xyz

The viewport tag for that website is this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

What am I doing wrong or missing?

thundergolfer
  • 527
  • 1
  • 5
  • 18
  • 1
    `user-scalable` is mobile only.. Specifically, I belive it's iOS Safari and Android Chrome only. Also, I can [zoom just fine](http://i.imgur.com/sL6zsic.png) on that link you provided (Chrome 57). That said, check [this question](http://stackoverflow.com/q/995914/4824627) and [this question](http://stackoverflow.com/q/27116221/4824627) and [this answer](http://stackoverflow.com/a/22053915/4824627), they might help – Matheus Avellar Mar 06 '17 at 18:21
  • Possible duplicate of [Prevent zoom cross-browser](https://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser) – Sam Denty Jul 13 '17 at 19:21

5 Answers5

3

Try this:

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />

or this:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
G4bri3l
  • 4,996
  • 4
  • 31
  • 53
2

You could use css.

body {
    touch-action: none;
}
<html>
    <head>
    </head>
    <body>
        Content here...
    </body>
</html>
More information here...
77Tigers
  • 29
  • 4
0
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

I searched for it as well, try this one, found it inside a bootstrap template =)

Jigz
  • 141
  • 1
  • 2
-1

You have a lot of options in your tag. maybe some options rule the other out? try to strip down the options to a few as possible.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

Should be enough. Eventually add user-scalable=no also.

https://css-tricks.com/snippets/html/responsive-meta-tag/

RoggA
  • 503
  • 1
  • 4
  • 15
  • It looks like it does'nt exist a cross browser solution for desktop browsers. have you seen this thread: http://stackoverflow.com/questions/27116221/prevent-zoom-cross-browser . Then, disabling zoom for desktop users is not recommended. – RoggA Feb 12 '16 at 11:48
-4

It's all wrong because they are skids.

Use these (must be both or wont work)

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport'/>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, minimum-scale=1">
Coding God
  • 1