首页 文章

如何在Mobile Safari上禁用视口缩放？

提问于
浏览 次
313

我已经尝试了所有这三个无济于事：

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=false;” />

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;” />

每个都是我通过谷歌搜索或SO搜索推荐的不同值，但是'user-scalable = X'值似乎都没有工作

我也尝试用逗号分隔值而不是分号，没有运气 . 然后我尝试只提供用户可扩展的值，仍然没有运气 .

UPDATE

从Apple的网站得到这个，它的工作原理：

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

原来问题是非标准引号，因为我从使用它们的网站复制了元标记，哎呀

html ios mobile-safari zoom viewport

13 回答

  • 619

    您的代码将属性双引号显示为精美的双引号 . 如果您的实际源代码中存在花哨的引号，我猜这就是问题所在 .

    这适用于iOS 4.2中的Mobile Safari .

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    回复于
  • 3

    对于寻找iOS 10解决方案的人来说，在iOS 10的Safari中禁用了 user-scaleable=no . 原因是Apple试图通过允许人们放大网页来改善可访问性 .

    From release notes ：

    为了改善Safari网站的可访问性，即使网站在视口中设置了user-scalable = no，用户现在也可以进行缩放 .

    据我所知，我们很幸运 .

    回复于
  • 0

    @mattis是正确的，iOS 10 Safari不允许您使用用户可伸缩属性禁用缩放缩放 . 但是，我在“gesturestart”事件中禁用了preventDefault . 我只在iOS 10.0.2的Safari上验证了这一点 .

    document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});
    回复于
  • 4

    for iphones safari直到iOS 10“viewport”不是解决方案，我不喜欢这种方式，但我已经使用了这个javascript代码，它帮助了我

    document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
      event.preventDefault();
    }
  }, false);
    回复于
  • 130

    尝试将以下内容添加到head-tag：

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

    另外

    <meta name="HandheldFriendly" content="true">

    最后，无论是作为样式属性还是在css文件中，为基于webkit的浏览器添加以下文本：

    html {
    -webkit-text-size-adjust: none
}
    回复于
  • 0
    user-scalable=0

    这不再适用于iOS 10. Apple删除了该功能 .

    除非你制作大平台应用程序，否则你现在无法在iOS上禁用缩放网站 .

    回复于
  • 81

    在Safari 9.0及更高版本中，您可以在viewport元标记中使用 shrink-to-fit ，如下所示

    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    回复于
  • 16

    这在IOS 10.3.2中工作正常

    document.addEventListener('touchmove', function(event) {
        event = event.originalEvent || event;
        if (event.scale !== 1) {
           event.preventDefault();
        }
    }, false);

    谢谢@arthur和@aleclarson

    回复于
  • 0

    有时候内容中的其他指令可能会让你对苹果公司对页面布局的最佳猜测搞砸你的观点，你只需要禁用捏缩放即可

    <meta name="viewport" content="user-scalable=no" />
    回复于
  • 8

    为了符合WAI WCAG 2.0 AA可访问性要求，您必须 never disable 捏缩放 . （WCAG 2.0：SC 1.4.4调整文本级别AA） . 你可以在这里阅读更多相关信息：Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

    回复于
  • -3

    我愚蠢地有一个包装div，其宽度以像素为单位 . 其他浏览器似乎足够聪明，可以解决这个问题 . 一旦我将宽度转换为百分比值，它在Safari移动设备上也能很好地工作 . 很烦人 .

    .page{width: 960px;}

    至

    .page{width:93.75%}

<div id="divPage" class="page">
</div>
    回复于
  • 4

    我设法通过将以下内容添加到HTML标头来停止此行为 . 这适用于移动设备，因为桌面浏览器在使用鼠标滚轮时支持缩放 . 这对桌面浏览器来说并不是什么大问题，但考虑到这一点很重要 .

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

    以及CSS样式表的以下规则

    html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}
    回复于
  • 10

    这个应该在iphone等上工作 .

    <meta name="viewport" content="width=device-width, initial-scale=1 initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    回复于

相关问题