44

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

使用元标记：

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

4

12 回答 12

84

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

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的概念，所以你应该把它排除在外以避免错误。您不需要最小值和最大值，因为您可以按预期方式关闭缩放。只使用宽度，否则你会遇到iOS 方向错误

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

Chrome ：缩放像在 iOS 中一样按预期工作，最小值和最大值被尊重，您可以使用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，但关闭并且不需要用户接受）。它确实带有相当多的错误，并且在 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 笔记

于 2012-09-04T19:50:29.163 回答
4

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

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

于 2012-07-05T14:37:17.610 回答
3

只需使用：

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

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

于 2013-05-23T13:40:36.967 回答
2

对于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-mobile”元标记在非 Apple 设备上被忽略，并且第三个标记在 HTML5 中是官方的，因此您可以一起使用所有这些标记。

对于Android，您没有一个全局解决方案，因为不是每个人都使用默认的 android 网络浏览器。请参阅适用于 Android 的全屏 Web 应用程序

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

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

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

于 2013-06-08T22:14:24.130 回答
2

我有一个三星 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">
于 2014-12-31T15:37:13.207 回答
2

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" />
于 2014-08-15T08:41:43.717 回答
0

Dan B 的以下建议对我很有用，我一直在尝试让我的网站在 android 上正确加载时遇到各种问题，这已经对它进行了排序。反正现在！

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

谢谢！

于 2014-06-11T08:03:09.523 回答
0

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

<meta name="viewport" content="width=1165 />
于 2013-06-28T06:26:19.093 回答
0

我们在标头中使用了以下 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>

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

于 2014-06-05T18:33:47.343 回答
0 
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
于 2014-05-22T01:54:49.497 回答
0

对于它的价值，这是我用来在我的 Nexus 7 (Android 4.2.2)/Chrome 上获得一个 1024 像素宽度的内容页面以完全全屏显示的内容，仅横向而不使用 javascript*：

width=device-width, initial-scale=.94, minimum-scale=0.8, maximum-scale=1.2, user-scalable=no

（我认为 user-scalable=no 实际上否定了 min- & max-scale）。我通过反复试验得到了 0.94 的值，而不是通过调用设备像素密度或类似的任何计算。

*ie 强制内容宽度与窗口匹配——我确实使用 js 有条件地编写视口元内容。

于 2013-07-23T17:39:13.677 回答
0

我正在使用此代码来防止放大 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" />');
}
于 2016-02-04T04:19:03.747 回答