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

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

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

Android 2.2:似乎根本不支持视口(viewport)元标记。

Android 2.3.x/3.x:通过设置 user-scalable=no，您也可以自己禁用视口(viewport)元标记的缩放。这可能就是您的宽度选项无效的原因。要允许浏览器缩放您的内容，您需要设置 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 禁用缩放(关键字 yes/不，在 4.x 中不起作用)。 iOS/Safari 也没有 target-densitydpi 的概念，因此您应该将其排除在外以避免错误。您不需要最小值和最大值，因为您可以按预期方式关闭缩放。只使用 width 否则你会遇到 iOS orientation bug

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

Chrome:缩放像在 iOS 中一样按预期工作，最小值和最大值受到尊重，您可以使用 user-scalable=no 关闭缩放。 p>

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

结论:在一些基本的浏览器/设备检测之后，您可以使用一些相当简单的 JS 来相应地设置内容。我知道这种类型的检测是不受欢迎的，但在这种情况下，这几乎是不可避免的，因为每个供应商都做了自己的事情!希望这可以帮助人们对抗视口(viewport)，如果有人有在不使用视口(viewport)的情况下禁用 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 为视口(viewport)元标记引入了一个名为 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:在 EDIT 2 中提到的视口(viewport)元标记 minimal-ui 现在已被 Apple 在此版本中删除。 Source - WebKit Notes