所有移动浏览器的完整网页和禁用缩放视口元标记
我希望我的网页全屏，并禁用所有移动设备上的缩放。
使用meta标签：
<meta name="viewport" content="width=1165, user-scalable=no"> 我能够为iPhone / iPad做到这一点，但在Android设备上，网站被放大到大约125％。
如果我使用标签
<meta name="viewport" content="width=max-device-width, user-scalable=no">
我得到相反的结果。 那么它适用于Android，但它不适用于iPad / iPhone。
不幸的是，每个浏览器都有它自己的视口元标记的实现。 不同的组合可以在不同的浏览器上使用。
Android 2.2 ：视口元标记似乎根本没有支持。
Android 2.3.x / 3.x ：通过设置user-scalable = no，您也可以自己禁用视口元标记的缩放。 这可能是为什么你的宽度选项没有效果。 要允许浏览器缩放您的内容，您需要设置user-scalable = yes ，然后要禁用缩放，您可以将最小和最大比例设置为相同的值，以使其无法缩小或增大。 玩具的初始比例，直到您的网站贴合。
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
Android 4.x ：同样的规则适用于2.3.x，除非最小和最大比例不再被尊重，如果您使用user-scalable = yes ，用户可以随时缩放，将其设置为“no”意味着您自己的比例被忽略，这是我现在面临的问题，使我想到这个问题…你似乎无法在4.x中同时禁用缩放和缩放。
iOS / Safari（经过4.x / 5.xtesting） ：缩放按预期工作，您可以使用user-scalable = 0 （关键字yes / no在4.x中不起作用）禁用缩放。 iOS / Safari也没有target-densitydpi的概念，所以你应该避免出现错误。 您不需要最小和最大，因为您可以closures缩放预期的方式。 只使用宽度，否则你会碰到iOS方向错误
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
Chrome ：缩放像iOS一样按预期工作，min和max都可以使用，您可以使用user-scalable = noclosures缩放。
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />
结论 ：在一些基本的浏览器/设备检测之后，可以使用一些相当简单的JS来相应地设置内容。 我知道这种types的检测是皱眉，但在这种情况下，这几乎是不可避免的，因为每个供应商已经去做了他们自己的事情！ 希望这可以帮助人们对抗视口，如果有人有禁用缩放Android 4.x的解决scheme，而不使用视口，请让我知道。
[编辑]
Android 4.x Chrome浏览器 （我认为这是在大多数国家预装的）：您可以确保用户无法缩放，页面全屏。 缺点是：你必须确保内容具有固定的宽度。 我没有在较低的Android版本上testing过。 要做到这一点，请看例子：
<meta name="viewport" content="width=620, user-scalable=no" />
[编辑2]
iOS / Safari 7.1 ：从v7.1开始，Apple为视口元标签（ minimal-ui引入了一个新标志。 为了帮助全屏应用程序，这隐藏了地址栏和底部工具栏的全屏体验（不完全屏幕API，但closures，不需要用户接受）。 它确实也带有一些错误，并且在iPad中不起作用。
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />
[编辑3]
iOS / Safari 8 Beta 4 ：编辑2中提到的视口元标记minimal-ui现在已经被苹果公司删除了。 来源 – WebKit笔记
HTML
<head> <meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'> </head>
jQuery的
选项1：
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
选项2：
var deviceSpecific = { iPad: 'width=1165,user-scalable=no' }; if(navigator.userAgent.match(/iPad/i){ $('meta[name=viewport]').attr('content',deviceSpecific.iPad); }
如果你发现不一致的话，选项二是最后一招。
只需使用：
<meta name="HandheldFriendly" content="True" />
适用于我的三星Note II和HTC Desire。
对于苹果设备很容易：
<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" />
第一个标签通过放置在iPhone / iPod / iPad主屏幕上的快捷方式图标打开，以全屏模式运行networking应用程序。
第二个标签只能与第一个标签一起使用。 可能的值是：默认，黑色和黑色半透明。
第三个标记会将站点宽度设置为其标准大小（1.0），并且不允许缩放。
注意：由于“apple-mobile”元标记在非苹果设备上被忽略，第三个标记在HTML5中是官方标记，因此可以将它们全部一起使用。
对于Android你没有一个全球性的解决scheme，因为不是每个人都使用默认的android浏览器。 查看适用于Android的全屏Web应用程序
这里有一些其他有用的链接
适用于iOS的提示： http : //matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
所有官方和非官方的已知meta： https ： //gist.github.com/kevinSuttle/1997924
我有一个三星Galaxy Note 4，并使用铬作为我的浏览器。 我发现它忽略了视口meta标签，使它与HandheldFriendly一起工作。 我结束了元标记组合。 在Android和iOS上适用于我。
<meta name="HandheldFriendly" content="True"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=YOUR_SITE_WIDTH">
Android从版本4.4.2修复它
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,height=device-height,target-densitydpi=device-dpi,user-scalable=yes" />
我遇到了各种各样的问题，甚至开始build立一个浏览器检测系统，为不同的浏览器提供不同的视口标签。 然后，我决定尝试简化我正在做的事情，一切正常。 设置视口的宽度，你想你的网站，走开一切正在工作。
<meta name="viewport" content="width=1165 />
为了什么是值得的，这里是我用来获得一个1024像素宽度的内容页面精确地全屏显示在我的Nexus 7（Android 4.2.2）/ Chrome浏览器，风景而不诉诸于JavaScript *：
width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no
（我认为用户可伸缩=否实际上否定了最大和最大尺度）。 我通过试验和错误获得了.94的值，而不是通过任何计算调用设备像素密度或类似的东西。
*即强制内容宽度匹配窗口 – 我没有使用JS有条件地写视口元内容。
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
我们在头文件中使用了以下Javascript来设置meta标签：
<script> if (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) { document.write("<meta name='viewport' content='width=1165, user-scalable=no'>"); // or whichever meta tags make sense for your site } else { document.write("<meta name='viewport' content='width=max-device-width, user- scalable=no'>"); // again, which ever meta tags you need } </script>
您可以添加其他条件并根据您的特定需求进行设置。
下面的build议从丹B已经为我工作的很好，我一直有各种问题试图让我的网站加载在Android上，这已经sorting它。 反正现在呢！
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
谢谢！
我正在使用此代码，以防止放大iPhone和问题已解决，但另一个问题出现; 当我点击input字段整个窗口跳转，然后将其位置设置为正常，当我按下去button相同的行为发生和Windows跳转。 我需要摆脱跳跃，只有窗口调整到正常的位置。
function zoomDisable(){ $('head meta[name=viewport]').remove(); $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />'); }
