所有移动浏览器的完整网页和禁用缩放视口元标记
Posted
技术标签:
【中文标题】所有移动浏览器的完整网页和禁用缩放视口元标记【英文标题】：Full webpage and disabled zoom viewport meta tag for all mobile browsers 【发布时间】：2012-07-05 22:47:57 【问题描述】：我希望我的网页全屏显示并在所有移动设备上禁用缩放。
带有元标记：
<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。
【问题讨论】：
哈哈哈 :) 这就是我现在看到的方式......而且它也是我当时的解决方案。在这些响应式网站的早期，我觉得应该禁用缩放功能...... 开发人员，请不要这样做！这会使您的网站对视力不佳的人完全无法使用！只是为缩小视图构建，但让人们放大。该功能的存在是有原因的！ 【参考方案1】：不幸的是，每个浏览器都有自己的视口元标记实现。不同的组合适用于不同的浏览器。
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 禁用缩放（关键字 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 来相应地设置内容。我知道这种类型的检测是不受欢迎的，但在这种情况下，这几乎是不可避免的，因为每个供应商都做了自己的事情！希望这可以帮助人们对抗视口，如果有人有在不使用视口的情况下禁用 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，但关闭并且不需要用户接受）。它确实带有 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 中提到的视口元标记 minimal-ui 现在已被 Apple 在此版本中删除。 Source - WebKit Notes
【讨论】：
感谢这篇有用的文章。我在 android 上与 chrome 作斗争。对于 Android 4.x 普通浏览器，我们通过设置视口宽度（以像素为单位）来解决上述问题。假设你想要一个 1.3 的固定比例，viewport witdh 应该是 Math.floor((screen.availWidth * 10) / 13)。我们将该数字放入 cookie 中，然后强制重新加载以允许服务器端代码设置正确的元标记。【参考方案2】：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);
如果您发现不一致，则选项二是最后的手段。
【讨论】：
您好，感谢您的回答。我试过了：在 Android 上它仍然不显示整页并且缩放仍然启用。在 ipad 上，它也可以缩放几乎适合屏幕，但如果我从横向更改为纵向或反之亦然，它会保持该分辨率......你自己不好检查...... 我无法在家中使用 iToys，但看到您已经在使用 jQuery，这应该可以回答您的问题，尽管可能有更有效的方法...【参考方案3】：简单使用：
<meta name="HandheldFriendly" content="True" />
在我的三星 Note II 和 HTC Desire 上运行良好。
【讨论】：
这适用于 android chrome 浏览器，在我的情况下，chrome 不会在不添加此元标记的情况下检测视口【参考方案4】：对于 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 网络浏览器。见Fullscreen Web App for Android
这里有一些其他有用的链接：
iOS 提示： http://matt.might.net/articles/how-to-native-iphone-ipad-apps-in-javascript/
所有官方和非官方已知元：https://gist.github.com/kevinSuttle/1997924
【讨论】：
【参考方案5】：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" />
【讨论】：
【参考方案6】：我有一台三星 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">
【讨论】：
【参考方案7】：我遇到了各种各样的问题，甚至开始构建浏览器检测系统，以将不同的视口标签传递给不同的浏览器。然后我决定尝试简化我正在做的事情并且一切正常。将视口设置为您希望网站的宽度，然后走开一切正常。
<meta name="viewport" content="width=1165 />
【讨论】：
【参考方案8】：对于它的价值，这是我曾经在我的 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）。我通过反复试验得到了 .94 的值，而不是通过调用设备像素密度或类似的任何计算。
*即强制内容宽度与窗口匹配——我确实使用 js 有条件地编写视口元内容。
【讨论】：
【参考方案9】：<meta name="viewport" content="width=device-width; height=device-height; maximum-scale=1.4; initial- scale=1.0; user-scalable=yes"/>
【讨论】：
【参考方案10】：我们在标头中使用了以下 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>
您可以添加其他条件并根据您的特定需求进行设置。
【讨论】：
【参考方案11】：Dan B 的以下建议对我很有用，我一直在尝试让我的网站在 android 上正确加载时遇到各种问题，这已经解决了。反正现在！
<meta name="viewport" content="width=YOUR_SITE_WIDTH"/>
谢谢！
【讨论】：
【参考方案12】：我正在使用此代码来防止放大 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" />');
【讨论】：
以上是关于所有移动浏览器的完整网页和禁用缩放视口元标记的主要内容，如果未能解决你的问题，请参考以下文章