所有移动浏览器的完整网页和禁用缩放视口元标记 [英] Full webpage and disabled zoom viewport meta tag for all mobile browsers

问题描述

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

I want my webpage to be full screen and disable zooming on all mobile devices.

使用元标记:

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

我可以在 iPhone/iPad 上执行此操作，但在 Android 设备上，网站会放大到 125% 左右.

I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%.

如果我使用标签

<meta name="viewport" content="width=max-device-width, user-scalable=no">

我得到了相反的结果.那么它可以在 Android 上运行，但不能在 iPad/iPhone 上运行.

I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone.

推荐答案

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

Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers.

Android 2.2:似乎根本不支持视口元标记.

Android 2.2: viewport meta tag does not seem to be supported at all.

Android 2.3.x/3.x:通过设置user-scalable=no，您也可以自己禁用视口元标记的缩放.这可能是您的宽度选项无效的原因.要允许浏览器缩放您的内容，您需要设置 user-scalable=yes，然后要禁用缩放，您可以将最小和最大比例设置为相同的值，这样它就不能缩小或增长.玩弄初始比例，直到您的网站紧贴.

Android 2.3.x/3.x: By setting user-scalable=no you disable the scaling of the viewport meta tag yourself as well. This is probably why your width option is having no effect. To allow the browser to scale your content, you need to set user-scalable=yes, then to disable zoom you can set the min and max scale to the same value so it cannot shrink or grow. Toy with the initial scale until your site fits snugly.

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

Android 4.x: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yes the user can always zoom, setting it to 'no' means your own scale is ignored, this is the issue I'm facing now that drew me to this question... You cannot seem to disable zoom and scale at the same time in 4.x.

iOS/Safari(4.x/5.x 测试):缩放按预期工作，您可以使用 user-scalable=0 禁用缩放(关键字 yes/不，在 4.x 中不起作用).iOS/Safari 也没有 target-densitydpi 的概念，所以你应该忽略它以避免错误.您不需要 min 和 max，因为您可以按预期方式关闭缩放.只使用 width 否则你会遇到 iOS 方向错误

iOS/Safari (4.x/5.x tested): Scales work as expected, you can disable scaling with user-scalable=0 (keywords yes/no don't work in 4.x). iOS/Safari also has no concept of target-densitydpi so you should leave that out to avoid errors. You don't need min and max since you can switch off zooming in the expected manner. Only use width or you'll run into the iOS orientation bug

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

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

Chrome: Scales work as expected like they do in iOS, min and max are honored and you can switch off zooming by using 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 缩放的解决方案，请告诉我.

Conclusion: You can use some fairly simple JS to set the content accordingly after some basic browser/device detection. I know this type of detection is frowned upon but in this case it's almost unavoidable because each vendor has gone and done their own thing! Hope this helps people fighting the viewport, and if anyone has a solution for disabling zooming in Android 4.x WITHOUT the use of the viewport, please let me know.

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

Android 4.x Chrome browser (which I think is pre-installed in most countries): You can make sure the user cannot zoom and the page is fullscreen. The downside: you have to make sure the content has a fixed width. I haven't tested this on lower Android versions. To do this see the example:

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

iOS/Safari 7.1:自 v7.1 以来，Apple 为视口元标记引入了一个名为 minimal-ui 的新标志.为了帮助全屏应用程序，这隐藏了地址栏和底部工具栏以获得全屏体验(不是全屏 API 但关闭并且不需要用户接受).它确实带有公平份额的错误 并且不适用于 iPad.

iOS/Safari 7.1: Since v7.1, Apple have introduced a new flag for the viewport meta tag called minimal-ui. To assist with full screen apps, this hides the address bar and bottom toolbar for a full-screen experience (not quite Full Screen API but close and doesn't require user acceptance). It does comes with it's fair share of bugs as well and doesn't work in iPads.

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

iOS/Safari 8 Beta 4:Apple 在此版本中删除了 EDIT 2 中提到的视口元标记 minimal-ui.来源 - WebKit 说明

iOS/Safari 8 Beta 4: The viewport meta tag minimal-ui mentioned in EDIT 2 has now been removed by Apple in this release. Source - WebKit Notes

这篇关于所有移动浏览器的完整网页和禁用缩放视口元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！