Android 所有移动浏览器的完整网页和禁用缩放视口元标记
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11345896/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full webpage and disabled zoom viewport meta tag for all mobile browsers
提问by Coen Ponsen
I want my webpage to be full screen and disable zooming on all mobile devices.
我希望我的网页全屏显示并在所有移动设备上禁用缩放。
With the meta tag:
使用元标记：
<meta name="viewport" content="width=1165, user-scalable=no">
I am able to do this for iPhone/iPad, but on Android devices the website is zoomed in to about 125%.
我可以在 iPhone/iPad 上执行此操作，但在 Android 设备上，网站会放大到 125% 左右。
If I use the tag
如果我使用标签
<meta name="viewport" content="width=max-device-width, user-scalable=no">
I get the opposite result. So then it works on Android but it doesn't work on iPad/iPhone.
我得到了相反的结果。那么它适用于Android，但不适用于iPad/iPhone。
回答by BrutalDev
Unfortunately each browser has it's own implementation of the viewport meta tag. Different combinations will work on different browsers.
不幸的是，每个浏览器都有自己的视口元标记实现。不同的组合适用于不同的浏览器。
Android 2.2: viewport meta tag does not seem to be supported at all.
Android 2.2：似乎根本不支持视口元标记。
Android 2.3.x/3.x: By setting user-scalable=noyou 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.
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: Same rule apply as 2.3.x except the min and max scales are not honored anymore and if you use user-scalable=yesthe 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.
Android 4.x：与 2.3.x 相同的规则适用于最小和最大比例不再受尊重，如果您使用user-scalable=yes用户可以始终缩放，将其设置为“no”意味着您自己的比例被忽略，这是我现在面临的问题，它吸引了我这个问题......你似乎无法在 4.x 中同时禁用缩放和缩放。
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-densitydpiso 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 widthor you'll run into the iOS orientation bug
iOS/Safari（4.x/5.x 测试）：缩放按预期工作，您可以使用user-scalable=0禁用缩放（关键字是/否在 4.x 中不起作用）。iOS/Safari 也没有target-densitydpi 的概念，所以你应该忽略它以避免错误。您不需要 min 和 max，因为您可以按预期方式关闭缩放。只使用宽度，否则你会遇到iOS 方向错误
<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0" />
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.
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" />
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.
结论：在一些基本的浏览器/设备检测之后，您可以使用一些相当简单的 JS 来相应地设置内容。我知道这种类型的检测是不受欢迎的，但在这种情况下几乎是不可避免的，因为每个供应商都做了自己的事情！希望这可以帮助人们对抗视口，如果有人有在不使用视口的情况下禁用 Android 4.x 缩放的解决方案，请告诉我。
[EDIT]
[编辑]
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:
Android 4.x Chrome 浏览器（我认为在大多数国家/地区已预装）：您可以确保用户无法缩放并且页面是全屏的。缺点：您必须确保内容具有固定的宽度。我还没有在较低的 Android 版本上测试过这个。为此，请参见示例：
<meta name="viewport" content="width=620, user-scalable=no" />
[EDIT 2]
[编辑 2]
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 welland doesn't work in iPads.
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" />
[EDIT 3]
[编辑 3]
iOS/Safari 8 Beta 4: The viewport meta tag minimal-uimentioned in EDIT 2 has now been removed by Apple in this release. Source - WebKit Notes
iOS/Safari 8 Beta 4：minimal-uiApple 在此版本中删除了 EDIT 2 中提到的视口元标记。来源 - WebKit 笔记
回答by Alastair
HTML
HTML
<head>
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1'>
</head>
jQuery
jQuery
Option 1:
选项1：
$('meta[name=viewport]').attr('content','width='+$(window).width()+',user-scalable=no');
Option 2:
选项 2：
var deviceSpecific = {
iPad: 'width=1165,user-scalable=no'
};
if(navigator.userAgent.match(/iPad/i){
$('meta[name=viewport]').attr('content',deviceSpecific.iPad);
}
Option two being a bit more of a last resort if you're finding inconsistency.
如果您发现不一致，则选项二更像是最后的手段。
回答by Alastair
Simply use:
只需使用：
<meta name="HandheldFriendly" content="True" />
Works well on my Samsung Note II and HTC Desire.
在我的 Samsung Note II 和 HTC Desire 上运行良好。
回答by Gianpiero
For Appledevices is easy:
对于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" />
The first tag run the web app in full screen mode when you open it via a shortcut icon placed on the iPhone/iPod/iPad home screen.
当您通过放置在 iPhone/iPod/iPad 主屏幕上的快捷方式图标打开 Web 应用程序时，第一个标签以全屏模式运行它。
The second tags works only in conjunction with the first one. Possible values are: default, black and black-translucent.
第二个标签仅与第一个标签一起使用。可能的值有：default、black 和 black-translucent。
The third tag blocks the site width to its standard size (1.0) and does not allow zooming.
第三个标记将站点宽度限制为其标准大小 (1.0) 并且不允许缩放。
NOTE: as the "apple-mobile" meta tags are ignored on non-Apple devices and the 3rd tag is official in HTML5, you can use all of them together.
注意：由于“apple-mobile”元标记在非 Apple 设备上被忽略，而第三个标记是 HTML5 中的官方标记，因此您可以一起使用所有这些标记。
For Androidyou have not a global solution since not everybody uses the default android webbrowser. See Fullscreen Web App for Android
对于Android，您没有全局解决方案，因为并非每个人都使用默认的 android 网络浏览器。查看适用于 Android 的全屏 Web 应用程序
Here some other useful links:
这里有一些其他有用的链接：
Tips for iOS: http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
iOS 提示：http: //matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
All the official and unofficial known meta: https://gist.github.com/kevinSuttle/1997924
所有官方和非官方已知元：https: //gist.github.com/kevinSuttle/1997924
回答by Giacomo
I have a Samsung Galaxy Note 4 and use chrome as my browser. I found it was ignoring the viewport meta tags, got it to work with HandheldFriendly. I ended up with a meta tag combo. Works for me on Android and iOS.
我有一台三星 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">
回答by jargalan
Android fixed it from version 4.4.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" />
回答by Saad Ahmed
I am using this code to prevent zoom in iPhone and problem was solved but another problem arises; when I click on input field whole window jumps up then sets its position to normal, when i pressed go button same behavior occurs and windows jumps. i need to get rid of jump so that only window resizes it to normal location.
我正在使用此代码来防止放大 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" />');
}
回答by Dan B
I was having all kinds of problems with this and even started to build a browser detection system to deliver different viewport tags to different browsers. Then I decided to try simplifying what I was doing and everything worked. Set the viewport to the width you want your site to be and walk away everything is working now.
我遇到了各种各样的问题，甚至开始构建一个浏览器检测系统来向不同的浏览器提供不同的视口标签。然后我决定尝试简化我正在做的事情，一切都奏效了。将视口设置为您希望网站的宽度，然后走开一切正常。
<meta name="viewport" content="width=1165 />
回答by David Smith
For what it's worth, here's what I used to get a 1024px width content page to go exactly full screen on my Nexus 7 (Android 4.2.2)/Chrome, landscape only without resorting to javascript*:
对于它的价值，这是我用来在我的 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
(I think the user-scalable=no actually negates the min- & max-scale though). I got the .94 value by trial and error, not by any sort of calculation invoking device pixel density or anything like that.
（我认为 user-scalable=no 实际上否定了最小和最大比例）。我通过反复试验得到了 .94 值，而不是通过调用设备像素密度或类似的任何类型的计算。
*i.e. to force content width to match window -- I did use js to conditionally write the viewport meta content.
* 即强制内容宽度与窗口匹配——我确实使用 js 有条件地编写视口元内容。
回答by Shakeel
<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
