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

发布于 2024-10-07 07:17:38 字数 760 浏览 0 评论 0原文

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

<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”值似乎都不起作用

我还尝试用逗号而不是分号来分隔值，但没有成功。然后我尝试只存在user-scalable值，仍然没有运气。

更新

从苹果网站得到这个并且它有效：

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

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

原文

I've tried all three of these to no avail:

<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;” />

each are different values I found recommended by google searching or SO searching, but none of the 'user-scalable=X' values seem to be working

I also tried comma delimiting the values instead of semicolon, no luck. Then I tried ONLY having the user-scalable value present, still no luck.

UPDATE

Got this from Apple's site and it works:

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

it turns out that the problem was the non-standard quotes because I had copied the meta tag from a website that was using them, whoops

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

幸福不弃 2024-10-14 07:17:39

这在 IOS 10.3.2 中运行良好，

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

谢谢 @arthur 和 @aleclarson

This works fine in IOS 10.3.2

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

thank you @arthur and @aleclarson

回复收藏 0 原文

猥琐帝 2024-10-14 07:17:39

如前所述，该解决方案基本上在 2020 年末有效：

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

但缺点是，当您滚动时，您仍然可以捏合，然后就会卡住。
解决方案是禁用滚动。

body {
    overflow: hidden;
}

但是，如果您仍然希望页面滚动怎么办？
您仍然可以将另一个

设置为 overflow:auto:

<body>
    <div id='app'></div>
</div>

然后

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

As mentioned this solution basically works as of late 2020:

document.addEventListener(
    'gesturestart', (e) => e.preventDefault()
);

But the downside is that while you are scrolling you'd still be able to pinch and then it gets stuck.
The solution is to disable scrolling.

body {
    overflow: hidden;
}

But, what if you still wanted the page to be scrolled?
You can still do it with another <div> set as overflow:auto:

<body>
    <div id='app'></div>
</div>

and then

body {
    overflow: hidden;
}

 #app {
     -webkit-overflow-scrolling: touch;
      height: 100vh;
      height: -webkit-fill-available;
      overflow: auto;
 }

回复收藏 0 原文

南风几经秋 2024-10-14 07:17:39

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

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

In Safari 9.0 and up you can use shrink-to-fit in viewport meta tag as shown below

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

回复收藏 0 原文

黎歌 2024-10-14 07:17:39

有时 content 标签中的其他指令可能会扰乱苹果对如何布局页面的最佳猜测/启发，您只需禁用捏缩放即可。

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

sometimes those other directives in the content tag can mess up Apple's best guess/heuristic at how to layout your page, all you need to disable pinch zoom is.

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

回复收藏 0 原文

悍妇囚夫 2024-10-14 07:17:39

我尝试了以上所有方法，但这对我在 IOS 设备上有效：

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

I tried all above things but this worked for me on IOS devices:

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

回复收藏 0 原文

不乱于心 2024-10-14 07:17:39

截至今天（2022 年 10 月），使用 iOS 14.8，我可以完全阻止双击缩放的唯一方法是：

document.addEventListener("click", (e) =>
        {
            e.preventDefault();
        })

即使这样：（

* {
    touch-action: none !important;
}

这显然不现实，但仅用于演示目的）在每种情况下都不够。事实证明，我处理过click的任何for元素，双击它都会导致几乎不可逆的放大，完全忽略touch-action设置。但是，如果我在点击处理程序中调用 preventDefault()，它就不会缩放。因此，到目前为止，在 document 级别执行此操作似乎就足够了，这样我就不必每次处理 click 时都执行此操作。

我不知道这可能会产生什么副作用，但我相信如果人们想到任何副作用，他们会插话的。

As of today (Oct. 2022) with iOS 14.8, the ONLY way I could completely prevent the double tap zoom was this:

document.addEventListener("click", (e) =>
        {
            e.preventDefault();
        })

Even this:

* {
    touch-action: none !important;
}

(which is obviously not realistic, but just for demonstration purposes) wasn't enough in every case. It turned out that any for element on which I had handled click, double tapping on it would cause a nearly irreversible zoom-in, completely ignoring the touch-action setting. But if I called preventDefault() in the click handler, it would not zoom. So, doing this at the document level so far seems to be enough, so that I don't have to do it every time I handle click.

I have no idea what side effects this might have, but I'm sure folks will chime in if they think of any.

回复收藏 0 原文

永不分离 2024-10-14 07:17:39

2023 更新：关于 Safari IOS 的辅助功能和当前状态

我们在 Safari iOS 中遇到了表单输入焦点自动缩放问题。解决这个问题的结果比我们预期的更加复杂。

下面引用@haltersweb：

“为了符合 WAI WCAG 2.0 AA 辅助功能要求，您绝不能禁用捏合缩放。（WCAG 2.0：SC 1.4.4 调整文本大小 AA 级”

如果辅助功能要求不影响您，则会受到 9 分处罚Google Lighthouse 中的可访问性要求违规 - 以及相应的 SEO 降级 - 会让您暂停一下是的，Chrome Mobile 会受到影响，

我们有几种方法可以解决此问题。测试并工作（感谢 Rick Strahl用于他的研究和博客文章）：

确保您的输入字段具有 font-size: 16px 或更大
在视口元中使用 maximum-scale=1 。

。尽管第二种解决方案听起来很有希望，而且我们不想更改输入的设计，但将字体大小设置为 16px 是解决此问题的适当方法最好避免引入黑客行为，因为最终您将不得不维护多年，并且会带来意想不到的后果。

回复收藏 0 原文

无悔心 2024-10-14 07:17:39

我愚蠢地有一个包装 div，其宽度以像素为单位。其他浏览器似乎足够聪明来处理这个问题。当我将宽度转换为百分比值后，它在 Safari 移动设备上也能正常工作。很烦人。

.page{width: 960px;}

到

.page{width:93.75%}

<div id="divPage" class="page">
</div>

I foolishly had a wrapper div which had a width measured in pixels. The other browsers seemed to be intelligent enough to deal with this. Once I had converted the width to a percentage value, it worked fine on Safari mobile as well. Very annoying.

.page{width: 960px;}

.page{width:93.75%}

<div id="divPage" class="page">
</div>

回复收藏 0 原文

情未る 2024-10-14 07:17:39

为了符合 WAI WCAG 2.0 AA 辅助功能要求，您必须切勿禁用捏合缩放。（WCAG 2.0：SC 1.4.4 调整文本大小 AA 级）。您可以在这里阅读更多相关信息：移动辅助功能：WCAG 2.0 和其他W3C/WAI 指南适用于移动设备，2.2 缩放/放大

回复收藏 0 原文

心不设防 2024-10-14 07:17:39

这个应该可以在 iPhone 等设备上运行。

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

This one should be working on iphone etc.

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

回复收藏 0 原文

巷子口的你 2024-10-14 07:17:38

编辑：iOS 10 之后可能无法工作，请参阅下面基于 touch-action 的解决方案。

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

这对我在 iOS 4.2 中的 Mobile Safari 上有效。

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

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

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

回复收藏 0 原文

我的黑色迷你裙 2024-10-14 07:17:38

对于寻求 iOS 10 解决方案的人来说，user-scaleable=no 在 iOS 10 的 Safari 中被禁用。原因是 Apple 试图通过允许人们缩放网页来提高可访问性。

摘自发行说明：

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

据我了解，我们运气不好。

回复收藏 0 原文

看海 2024-10-14 07:17:38

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

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

@mattis is correct that iOS 10 Safari won't allow you to disable pinch to zoom with the user-scalable attribute. However, I got it to disable using preventDefault on the 'gesturestart' event. I've only verified this on Safari in iOS 10.0.2.

document.addEventListener('gesturestart', function (e) {
    e.preventDefault();
});

回复收藏 0 原文

随风而去 2024-10-14 07:17:38

使用 CSS touch-action 属性是最优雅的解决方案。在 iOS 13.5 和 iOS 14 上进行了测试。

要禁用捏合缩放手势并双击缩放：

body {
  touch-action: pan-x pan-y;
}

如果您的应用程序也不需要平移（即滚动），请使用以下命令：

body {
  touch-action: none;
}

Using the CSS touch-action property is the most elegant solution. Tested on iOS 13.5 and iOS 14.

To disable pinch zoom gestures and and double-tap to zoom:

body {
  touch-action: pan-x pan-y;
}

If your app also has no need for panning, i.e. scrolling, use this:

body {
  touch-action: none;
}

回复收藏 0 原文

骄傲 2024-10-14 07:17:38

对于 iphone safari 直至 iOS 10“视口”不是一个解决方案，我不喜欢这种方式，但我使用了这个 javascript 代码，它对我有帮助

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

for iphones safari up to iOS 10 "viewport" is not a solution, i don't like this way, but i have used this javascript code and it helped me

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

回复收藏 0 原文

儭儭莪哋寶赑 2024-10-14 07:17:38

我使用以下代码让它在 iOS 12 中工作：

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

使用第一个 if 语句，我确保它只会在 iOS 环境中执行（如果它在 Android 中执行，滚动行为将被破坏）。另请注意将passive 选项设置为false。

I got it working in iOS 12 with the following code:

if (/iPad|iPhone|iPod/.test(navigator.userAgent)) {
  window.document.addEventListener('touchmove', e => {
    if(e.scale !== 1) {
      e.preventDefault();
    }
  }, {passive: false});
}

With the first if statement I ensure it will only execute in iOS environments (if it executes in Android the scroll behivour will get broken). Also, note the passive option set to false.

回复收藏 0 原文

唠甜嗑 2024-10-14 07:17:38

我通过将以下内容添加到 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;
}

I managed to stop this behavior by adding the following to the HTML header. This works on mobile devices, as desktop browsers support zooming when using the mouse wheel. It's not a big deal on desktop browsers but it's important to take this into account.

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

and the following rule to the CSS stylesheet

html {
	-webkit-text-size-adjust: none;
	touch-action: manipulation;
}

回复收藏 0 原文

梨涡 2024-10-14 07:17:38

实际上，Apple 在最新的 iOS 版本上禁用了 user-scalable=no 。
我尝试作为指导，这种方法可以工作：

body {
  touch-action: pan-x pan-y;
}

Actually Apple disabled user-scalable=no on latest iOS versions.
I tried as guideline and this way can work:

body {
  touch-action: pan-x pan-y;
}

回复收藏 0 原文

深者入戏 2024-10-14 07:17:38

user-scalable=0

这在 iOS 10 上不再起作用。Apple 删除了该功能。

现在你无法在 iOS 上禁用 Zoom 网站，除非你制作了一个大平台应用程序。

user-scalable=0

This no longer works on iOS 10. Apple removed the feature.

There is no way yo can disable zoom website on iOS now, unless you make gross platform app.

回复收藏 0 原文

瞎闹 2024-10-14 07:17:38

尝试将以下内容添加到您的 head 标签中：

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

Try adding the following to your head-tag:

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

additionally

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

Finally, either as a style-attribute or in your css file, add the following text for webkit-based Browsers:

html {
    -webkit-text-size-adjust: none
}

回复收藏 0 原文

~没有更多了~

关于作者

日裸衫吸

暂无简介

0 文章

0 评论

21 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（20）

关于作者

相关话题

热门标签

推荐作者

忆伤

眼泪也成诗

zangqw

旧伤慢歌

qq_GlP2oV

旧时模样

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（20）

关于作者

相关话题

热门标签

推荐作者

忆伤

眼泪也成诗

zangqw

旧伤慢歌

qq_GlP2oV

旧时模样

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。