My meta viewport doesn't work

问题

I'm working at a website(Revogue).I'm trying to disable zoom for mobile phones and it doesn't work.I tried many metaviewports...Please help me((

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

回答1:

This should be all you need to disable zoom:

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

If your browser is still zooming make sure there's no "force zoom" accessibility settings enabled. In Chrome it's under "three dot menu"->settings->accessibility.

回答2:

You must config in css file to works, something like this

<style>
@-ms-viewport{
    user-zoom:fixed;
    max-zoom:2;
    min-zoom:2;
}

body, html{
    margin:0;
    overflow:hidden;
    -ms-content-zooming:none;
    -ms-overflow-style:none !important;
    background-color: #ccc;
    width:720px;
    height:480px;
}

</style>

来源：https://stackoverflow.com/questions/33287965/my-meta-viewport-doesnt-work

标签

mobile

viewport