blocks|key|1060663|text|这应该是您需要的所有内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1060664|<meta+name="viewport"+
++++++content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=0">|code-block|syntax|javascript|1060665|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

This should be everything you need:
<pre><code>&lt;meta name=&quot;viewport&quot; 
 content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&quot;&gt;
</code></pre>

blocks|key|1060679|text|对于那些来晚了的人来说，kgutteridge的答案不适用于我，Benny+Neugebauer的答案包括目标密度the+(a+feature+that+is+being+deprecated)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1060680|然而，这对我来说是可行的：|1060681|<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=no"+/>|code-block|syntax|javascript|1060682|entityMap|0|LINK|mutability|MUTABLE|url|http://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/^0|1S|W|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|X|8|@]|9|@]|C|$I|J]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

For those of you late to the party, kgutteridge's answer doesn't work for me and Benny Neugebauer's answer includes target-densitydpi (a <a href="http://petelepage.com/blog/2013/02/viewport-target-densitydpi-support-is-being-deprecated/">feature that is being deprecated</a>).

This however does work for me: 

<pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&gt;
</code></pre>

blocks|key|1060759|text|似乎只是给index.html添加元标签并不能阻止页面缩放。添加下面的样式将会产生魔力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1060760|:root+{
++touch-action:+pan-x+pan-y;
++height:+100%25+
}|code-block|syntax|javascript|1060761|编辑:演示：https://no-mobile-zoom.stackblitz.io|offset|length|1060762|entityMap|0|LINK|mutability|MUTABLE|url|https://no-mobile-zoom.stackblitz.io/^0|0|0|6|10|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Seems like just adding meta tags to index.html doesn't prevent page from zooming. Adding below style will do the magic. 

<pre><code>:root {
 touch-action: pan-x pan-y;
 height: 100% 
}
</code></pre>

EDIT:
Demo: <a href="https://no-mobile-zoom.stackblitz.io" rel="noreferrer">https://no-mobile-zoom.stackblitz.io</a>

blocks|key|846327|text|请尝试添加此元标记和样式|type|unstyled|depth|inlineStyleRanges|entityRanges|data|846328|<meta+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=no"+name="viewport"/>


<style>
body{
++++++++touch-action:+manipulation;
++++}
</style>|code-block|syntax|javascript|846329|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

please try adding this meta-tag and style 

<pre><code>&lt;meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/&gt;


&lt;style&gt;
body{
 touch-action: manipulation;
 }
&lt;/style&gt;
</code></pre>

blocks|key|846309|text|你可以通过简单的添加下面的'meta‘元素到你的’head‘中来完成这个任务：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|846310|<meta+name="viewport"+content="user-scalable=no">|code-block|syntax|javascript|846311|添加诸如“width”、“initial-scale”、“maximum-width”、“maximum-scale”之类的所有属性可能不起作用。因此，只需添加上述元素即可。|846312|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

You can accomplish the task by simply adding the following 'meta' element into your 'head':

<pre><code>&lt;meta name="viewport" content="user-scalable=no"&gt;
</code></pre>

Adding all the attributes like 'width','initial-scale', 'maximum-width', 'maximum-scale' might not work. Therefore, just add the above element.

blocks|key|1060793|text|<script+type="text/javascript">
document.addEventListener('touchmove',+function+(event)+{
++if+(event.scale+!==+1)+{+event.preventDefault();+}
},+{+passive:+false+});
</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1060794|请添加脚本以禁用收缩、点击、焦点缩放|unstyled|1060795|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>&lt;script type="text/javascript"&gt;
document.addEventListener('touchmove', function (event) {
 if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
&lt;/script&gt;
</code></pre>

Please Add the Script to Disable pinch, tap, focus Zoom

blocks|key|846493|text|使用meta-tag的解决方案对我不起作用(在Chrome+win10和safari+iOS14.3上测试)，我也认为Jack和其他人提到的关于可访问性的问题应该得到尊重。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|846494|我的解决方案是仅在被默认缩放损坏的元素上禁用缩放。|846495|为此，我注册了缩放手势的事件侦听器，并使用event.preventDefault()抑制浏览器的默认缩放行为。|846496|这需要通过几个事件(触摸手势、鼠标滚轮和按键)来完成。以下代码片段是触摸板上的鼠标滚轮和挤压手势的示例：|846497|noteSheetCanvas.addEventListener("wheel",+e+=>+{
++++++++//+suppress+browsers+default+zoom-behavior:
++++++++e.preventDefault();

++++++++//+execution+my+own+custom+zooming-behavior:
++++++++if+(e.deltaY+>+0)+{
++++++++++++this._zoom(1);
++++++++}+else+{
++++++++++++this._zoom(-1);
++++++++}
++++});|code-block|syntax|javascript|846498|这里描述了如何检测触摸手势：https://stackoverflow.com/a/11183333/1134856|846499|我使用它为应用程序的大多数部分保留标准缩放行为，并在canvas-element上定义自定义缩放行为。|846500|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/11183333/1134856^0|2|4|0|0|L|M|0|0|0|E|18|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@$9|13|A|14|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|15|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|19|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|1A|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1B|8|@]|D|@$9|1C|A|1D|1|1E]]|E|$]]|$1|S|3|T|5|6|7|1F|8|@]|D|@]|E|$]]|$1|U|3|-4|5|6|7|1G|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]]]

The solution using a <code>meta</code>-tag did not work for me (tested on Chrome win10 and safari IOS 14.3), and I also believe that the concerns regarding accessibility, as mentioned by Jack and others, should be honored.
My solution is to disable zooming only on elements that are damaged by the default zoom.
I did this by registering event listeners for zoom-gestures and using <code>event.preventDefault()</code> to suppress the browsers default zoom-behavior.
This needs to be done with several events (touch gestures, mouse wheel and keys). The following snippet is an example for the mouse wheel and pinch gestures on touchpads:
<pre><code>noteSheetCanvas.addEventListener(&quot;wheel&quot;, e =&gt; {
 // suppress browsers default zoom-behavior:
 e.preventDefault();

 // execution my own custom zooming-behavior:
 if (e.deltaY &gt; 0) {
 this._zoom(1);
 } else {
 this._zoom(-1);
 }
 });
</code></pre>
How to detect touch gestures is described here: <a href="https://stackoverflow.com/a/11183333/1134856">https://stackoverflow.com/a/11183333/1134856</a>
I used this to keep the standard zooming behavior for most parts of my application and to define custom zooming-behavior on a canvas-element.

blocks|key|1060915|text|通过这篇文章和其他几篇文章，我设法解决了这个问题，这样它就可以使用以下代码与Android和iPhone/iPad/iPod兼容。这是针对PHP的，您可以将相同的概念用于任何其他语言的字符串搜索。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1060916|<?php+//Device+specific+headers
$iPod++++=+stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone++=+stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad++++=+stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android+=+stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS+++=+stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if($iPhone+%7C%7C+$iPod+%7C%7C+$iPad){
++++echo+'<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+user-scalable=0"+/>';
}+else+{
++++echo+'<meta+name="viewport"+content="width=device-width,+initial-scale=1.0"+/>';
}|code-block|syntax|javascript|1060917|?>|1060918|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

Using this post and a few others I managed to sort this out so that is compatible with Android and iPhone/iPad/iPod using the following code. This is for PHP, you can use the same concept for any other language with string searches.
<pre><code>&lt;?php //Device specific headers
$iPod = stripos($_SERVER['HTTP_USER_AGENT'],&quot;iPod&quot;);
$iPhone = stripos($_SERVER['HTTP_USER_AGENT'],&quot;iPhone&quot;);
$iPad = stripos($_SERVER['HTTP_USER_AGENT'],&quot;iPad&quot;);
$Android = stripos($_SERVER['HTTP_USER_AGENT'],&quot;Android&quot;);
$webOS = stripos($_SERVER['HTTP_USER_AGENT'],&quot;webOS&quot;);

if($iPhone || $iPod || $iPad){
 echo '&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0&quot; /&gt;';
} else {
 echo '&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot; /&gt;';
}
</code></pre>
?&gt;

blocks|key|1060950|text|这可能会对某些人有所帮助:在iOS上，我的问题是通过将<button>s替换为<div>s以及其他提到的事情来解决的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1060951|entityMap^0|R|8|13|5|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

This may help someone: on iOS, my problem was fixed by swapping <code>&lt;button&gt;</code>s for <code>&lt;div&gt;</code>s, along with the other things mentioned.

blocks|key|1060814|text|document.addEventListener('dblclick',+(event)+=>+{
++++event.preventDefault()
},+{+passive:+false+});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1060815|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>document.addEventListener('dblclick', (event) =&gt; {
 event.preventDefault()
}, { passive: false });
</code></pre>

I am creating a mobile web page that is basically a big form with several text inputs.

However (at least on my Android cellphone), every time I click on some input the whole page zooms there, obscuring the rest of the page. Is there some HTML or CSS command to disable this kind of zoom on moble web pages?

How can I "disable" zoom on a mobile web page?

Android

我正在创建一个移动网页，它基本上是一个有几个文本输入的大表单。然而(至少在我的Android手机上)，每次我点击一些输入，整个页面都会放大，模糊了页面的其余部分。有没有什么HTML或CSS命令可以在移动网页上禁用这种缩放？

问如何在移动网页上“禁用”缩放？
EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动网页上“禁用”缩放？EN

回答 10

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在移动网页上“禁用”缩放？
EN