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

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

使用元标记：

<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=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 测试）：缩放按预期工作，您可以使用用户可扩展 = 0 禁用缩放（关键字是/否在 4.x 中不起作用）。 iOS/Safari也没有目标密度dpi的概念，所以你应该省略它以避免错误。您不需要最小值和最大值，因为您可以按预期方式关闭缩放。仅使用宽度，否则会遇到iOS方向错误

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

Chrome：秤的工作方式与在 iOS 中一样，最小值和最大值都适用，您可以使用用户缩放=否关闭缩放。

<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浏览器（我认为在大多数国家/地区都预装了）：您可以确保用户无法缩放并且页面是全屏的。缺点：您必须确保内容具有固定宽度。我还没有在较低的安卓版本上测试过这个。为此，请参阅以下示例：

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

[编辑2]

iOS/Safari 7.1：从 v7.1 开始，Apple 为视口元标记引入了一个名为 minimal-ui 的新标志。为了帮助全屏应用，这会隐藏地址栏和底部工具栏以获得全屏体验（不完全是全屏 API，但关闭并且不需要用户接受）。它确实也带有相当多的错误，并且在iPad中不起作用。

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

[编辑3]

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

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

第二个标签只能与第一个标签结合使用。可能的值为：默认值、黑色和黑色半透明。

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

注意：由于"苹果-移动"元标记在非Apple设备上被忽略，并且第三个标记在HTML5中是官方标记，因此您可以一起使用所有这些元标记。

对于Android，您没有全球解决方案，因为不是每个人都使用默认的android网络浏览器。查看适用于安卓的全屏 Web 应用程序

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

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

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

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

我有一个三星Galaxy Note 4，并使用chrome作为我的浏览器。我发现它忽略了视口元标记，让它与 HandheldFriendly一起使用。我最终得到了一个元标记组合。在安卓和iOS上为我工作。

<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=YOUR_SITE_WIDTH">

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

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

对于它的价值，这是我曾经在我的Nexus 7（Android 4.2.2）/Chrome上获得一个1024px宽度的内容页面，完全全屏显示，只有横向而不诉诸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 来设置元标记：

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

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

Dan B 的以下建议对我来说效果很好，我一直在尝试让我的网站在 android 上正确加载时遇到各种问题，这已经解决了它。反正现在！

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

谢谢！

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

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

相关内容

最新更新

热门标签：