Question

我希望我的网页全屏显示并禁用所有移动设备上的缩放。

使用元标记：

<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。

Answer 1

不幸的是，每个浏览器都有自己的视口元标记实现。不同的组合适用于不同的浏览器。

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 用户可以随时缩放，将其设置为“否”意味着您自己的比例被忽略，这是我现在面临的问题，这让我想到了这个问题......你似乎无法在4中同时禁用缩放和缩放。 X

iOS / Safari（4.x / 5.x测试）：缩放按预期工作，您可以使用 user-scalable = 0 禁用缩放（关键字是/不能在4.x中工作）。 iOS / Safari也没有 target-densitydpi 的概念，因此您应该将其保留以避免错误。您不需要min和max，因为您可以按预期方式关闭缩放。只使用 width ，否则您将遇到iOS orientation bug

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

Chrome ：缩放按预期工作，就像在iOS，min和max中一样，您可以使用 user-scalable = no 来关闭缩放。

<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,width=device-width,user-scalable=no" />

结论：您可以使用一些相当简单的JS在一些基本的浏览器/设备检测后相应地设置内容。我知道这种类型的检测是不受欢迎的，但在这种情况下它几乎是不可避免的，因为每个供应商已经完成了他们自己的事情！希望这可以帮助人们对抗视口，如果有人有解决方案在Android 4.x中禁用缩放而不使用视口，请告诉我。

[编辑]

Android 4.x Chrome浏览器（我认为已在大多数国家/地区预装）：您可以确保用户无法缩放并且页面是全屏的。缺点：您必须确保内容具有固定宽度。我没有在较低的Android版本上测试过这个。为此，请参阅示例：

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

[编辑2]

iOS / Safari 7.1 ：自v7.1起，Apple为视口元标记minimal-ui引入了一个新标记。为了帮助全屏应用程序，这会隐藏地址栏和底部工具栏以获得全屏体验（不是全屏幕API，但是关闭并且不需要用户接受）。它确实附带了fair share of bugs as well并且在iPad中不起作用。

<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0, minimal-ui" />

[编辑3]

iOS / Safari 8 Beta 4 ：此版本中Apple已删除了EDIT 2中提到的视口元标记minimal-ui。 Source - WebKit Notes

Answer 2

<强> 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);
}

如果您发现不一致，则选项二是最后的手段。

Answer 3

只需使用：

<meta name="HandheldFriendly" content="True" />

适用于我的三星Note II和HTC Desire。

Answer 4

对于 Apple 设备很简单：

<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主屏幕上的快捷图标打开时，第一个标签以全屏模式运行Web应用程序。

第二个标签仅与第一个标签一起使用。可能的值包括：默认值，黑色和黑色半透明。

第三个标记将网站宽度阻止为其标准大小（1.0），并且不允许缩放。

注意：由于非Apple设备上的“apple-mobile”元标记被忽略，而第3个标记在HTML5中是官方标记，因此您可以将它们全部一起使用。

对于 Android ，您还没有全球解决方案，因为不是每个人都使用默认的Android webbrowser。见Fullscreen Web App for Android

这里有一些其他有用的链接：

iOS提示： http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/

所有官方和非官方的已知元：https://gist.github.com/kevinSuttle/1997924

Answer 5

我有三星Galaxy Note 4并使用chrome作为我的浏览器。我发现它忽略了视口元标记，让它与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">

Answer 6

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" />

Answer 7

我遇到了各种各样的问题，甚至开始构建浏览器检测系统，为不同的浏览器提供不同的视口标签。然后我决定尝试简化我正在做的事情，一切正常。将视口设置为您希望站点的宽度，并将所有内容都移除。

<meta name="viewport" content="width=1165 />

Answer 8

对于它的价值，这里我曾经得到一个1024px宽度的内容页面，以便在我的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有条件地写视口元内容。

Answer 9

<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>

Answer 10

我们在标头中使用了以下Javascript来设置元标记：

<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>

您可以添加其他条件并根据您的特定需求进行设置。

Answer 11

Dan B的以下建议对我来说很有用，我一直有各种各样的问题试图让我的网站加载到Android上，这已经对它进行了排序。现在无论如何！

<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>

谢谢！

Answer 12

我正在使用此代码来防止缩放iPhone并解决了问题，但又出现了另一个问题;当我点击输入字段时整个窗口跳起然后将其位置设置为正常，当我按下按钮时，同样的行为发生并且窗口跳跃。我需要摆脱跳跃，以便只有窗口将其调整到正常位置。

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}

所有移动浏览器的完整网页和禁用的缩放视口元标记

12 个答案: