blocks|key|3095024|text|我使用这个标签来防止在所有移动平台上进行缩放：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3095025|<meta+name="viewport"+content="width=device-width,+initial-scale=1.0,+maximum-scale=1.0,+minimum-scale=1.0,+user-scalable=no,+target-densityDpi=device-dpi"+/>|code-block|syntax|javascript|3095026|3095027|使用,而不是;|offset|length|style|CODE|3095028|entityMap^0|0|0|0|2|1|6|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|S|8|@$J|T|K|U|L|M]|$J|V|K|W|L|M]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|O|$]]

I use this tag to prevent zoom on all mobile platforms :

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

<hr>

With <code>,</code> and not <code>;</code>

blocks|key|2881091|text|<meta+charset="UTF-8"+/>
<meta+name="viewport"+content="width=device-width;+height=device-height"+/>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|2881092|在三星盖乐世S3上运行良好|unstyled|2881093|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;meta charset="UTF-8" /&gt;
&lt;meta name="viewport" content="width=device-width; height=device-height" /&gt;
</code></pre>

worked well on Samsung Galaxy S3

blocks|key|226544|text|在我的部分中，我有这个“视窗”，它在安卓(Nexus5)和iPhone上都工作得很好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226545|<meta+name="viewport"+content="width=device-width;+initial-scale=0.5,+maximum-scale=0.5,+minimum-scale=0.5;+"+/>|code-block|syntax|javascript|226546|我希望这对你有帮助！|226547|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|$]]

In my part, I've this "viewport" which work good on an Android (Nexus 5) and on iPhone.

<pre><code>&lt;meta name="viewport" content="width=device-width; initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5; " /&gt;
</code></pre>

I hope this help you !

blocks|key|2881108|text|将此脚本放入以避免收缩缩放。在最新版本的safari中，如果meta标签不起作用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2881109|+++document.documentElement.addEventListener('touchstart',+function(event)+{
+++++if+(event.touches.length+>+1)+{
+++++++event.preventDefault();
+++++}
+++},+false);|code-block|syntax|javascript|2881110|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|$]]

Put this script to avoid pinch zoom. in latest version of safari, if meta tag not working

<pre><code> document.documentElement.addEventListener('touchstart', function(event) {
 if (event.touches.length &gt; 1) {
 event.preventDefault();
 }
 }, false);
</code></pre>

blocks|key|226565|text|有时，您需要将-webkit-flex:1添加到容器中(当然，如果使用的是flexbox+)。这对解决我的视窗问题很有帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|226566|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

Some time you need to add -webkit-flex:1 to containers (if flexbox in use ofcourse). That is helped me with my viewport problem.

blocks|key|223765|text|它似乎在普通的iOS+(11.3)浏览器中不再起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|223766|然而，如果添加到主屏幕并从那里启动，它仍然会影响网页。|223767|因此，如果你触摸分享菜单，选择“添加到主屏幕”，并从那里打开它，它将阻止你按预期缩放：|223768|<meta+charset="utf-8"+/>
<title>luckydonald/SelfhostedMouse</title>
<meta+name="apple-mobile-web-app-title"+content="SelfhostedMouse"+/>
<meta+name="apple-mobile-web-app-capable"+content="yes"+/>
<meta+name="apple-mobile-web-app-status-bar-style"+content="black-translucent"+/>
<meta+name="viewport"+content="user-scalable=no;+width=device-width;+initial-scale=1.0;+minimum-scale=1.0;+maximum-scale=1.0">|code-block|syntax|javascript|223769|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

It seems it doesn't work any longer in the normal iOS (11.3) Browser. 

However it still affects the webpage, if added to the homescreen, and launched from there.

So if you touch the share menu, select "Add to Home Screen", and open it up from there it will stop you from zooming as expected:

<pre><code>&lt;meta charset="utf-8" /&gt;
&lt;title&gt;luckydonald/SelfhostedMouse&lt;/title&gt;
&lt;meta name="apple-mobile-web-app-title" content="SelfhostedMouse" /&gt;
&lt;meta name="apple-mobile-web-app-capable" content="yes" /&gt;
&lt;meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /&gt;
&lt;meta name="viewport" content="user-scalable=no; width=device-width; initial-scale=1.0; minimum-scale=1.0; maximum-scale=1.0"&gt;
</code></pre>

I am using the following html code

<pre><code>&lt;!DOCTYPE HTML&gt;
 &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;test&lt;/title&gt;
 &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
 &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/&gt;
 &lt;/head&gt;
 &lt;body&gt;
 test
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

My intention is to prevent user from zooming in or out. The above code isn't working in iPhone and Android. Any solution ?

EDIT: It appears in iPhone settings, if <code>Zoom</code> is selected as <code>On</code> under <code>Settings&gt;Accessibility&gt;Zoom</code>, then this will override meta tag. <a href="https://stackoverflow.com/questions/4788269/ios-mobile-safari-still-zooms-while-viewport-is-set-to-user-scalable-no-chec">Source</a>

Not sure why it is happening in android.

Viewport meta tag not working in iPhone and Android

容器

我正在使用下面的html代码<!DOCTYPE HTML> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta...

问Viewport元标签在iPhone和安卓系统中不起作用
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Viewport元标签在iPhone和安卓系统中不起作用EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Viewport元标签在iPhone和安卓系统中不起作用
EN