完整的网页和残疾人变焦视meta标签的所有移动浏览器 [英] 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标签：
<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 ：视区meta标签似乎并不能在所有支持的
Android 2.2: viewport meta tag does not seem to be supported at all.
的Android 2.3.x / 3.X ：通过设置的用户可升级=没有的禁用视元的扩展标记自己为好。这可能是为什么你的宽度选项有没有效果。为了让浏览器扩展你的内容，你需要设置的用户可升级= 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，除了最小和最大的衡器不是兑现了，如果你使用的用户可升级= 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的测试）：秤按预期工作，你可以禁用与用户可升级= 0 的（关键字扩展是/没有没有在4.x的工作）。的iOS / Safari浏览器也有没有什么概念的目标densitydpi 的，所以你应该离开的，以避免错误。你不需要最小和最大值，因为你可以关掉缩放预期的方式。仅使用的宽度的，否则你会碰到 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系统中，最小和最大的荣幸，您可以关闭使用变焦的用户可升级=没有的
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浏览器（我认为这是pre-安装在大多数国家）：可以确保用户无法变焦和页面是全屏。缺点：你必须确保内容有一个固定的宽度。我还没有在较低的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开始，苹果公司已经推出了新的标志，叫做视meta标签最小-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的：视区meta标签最小-UI 在EDIT 2中提及目前已通过苹果公司在这个版本中删除。 <一href="https://developer.apple.com/library/$p$prelease/ios/releasenotes/General/RN-iOSSDK-8.0/">Source - 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
这篇关于完整的网页和残疾人变焦视meta标签的所有移动浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
