当前位置： 文江博客话题详情

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

发布于 2024-10-07 07:17:38 字数 760 浏览 9 评论 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

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

扫码二维码加入Web技术交流群

发布评论

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

评论（20）

幸福不弃 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

回复 原文
猥琐帝 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;
 }
回复 原文
南风几经秋 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">
回复 原文
黎歌 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" />
回复 原文
悍妇囚夫 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">
回复 原文
不乱于心 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.

回复 原文
永不分离 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 是解决此问题的适当方法 最好避免引入黑客行为，因为最终您将不得不维护多年，并且会带来意想不到的后果。

2023 Update: on accessibility and the current state of Safari IOS

We had an auto-zoom issue with an input focus in a form, in Safari iOS. Solving the issue turned out to be more complex that we expected.

Quoting @haltersweb below:

"In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA"

If the accessibility requirements don't sway you, the 9 point penalty incurred in Google Lighthouse for accessibility requirements violations — with the corresponding SEO downgrade – will give you some pause. Yes, Chrome Mobile is affected. Do not disable pinch zoom.

There are a couple of ways to deal with this issue that we tested and work (kudos to Rick Strahl for his research and blogpost):

  • Make sure that your input fields have font-size: 16px or greater.
  • Use maximum-scale=1 in the viewport meta tag selectively for iOS Safari.

Although the second solution sounds promising and we didn't want to deal with changing the design of the inputs, getting the font-size to 16px is the appropriate way to deal with this. It is always better to abstain from introducing hacks that in the end, you'll have to maintain for many years, and that will come with unintended consequences.

回复 原文
无悔心 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;}

to

.page{width:93.75%}

<div id="divPage" class="page">
</div>
回复 原文
情未る 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 缩放/放大

In order to comply with WAI WCAG 2.0 AA accessibility requirements you must never disable pinch zoom. (WCAG 2.0: SC 1.4.4 Resize text Level AA). You can read more about it here: Mobile Accessibility: How WCAG 2.0 and Other W3C/WAI Guidelines Apply to Mobile, 2.2 Zoom/Magnification

回复 原文
心不设防 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">
回复 原文
巷子口的你 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" />
回复 原文
我的黑色迷你裙 2024-10-14 07:17:38

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

摘自发行说明：

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

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

For the people looking for an iOS 10 solution, user-scaleable=no is disabled in Safari for iOS 10. The reason is that Apple is trying to improve accessibility by allowing people to zoom on web pages.

From release notes:

To improve accessibility on websites in Safari, users can now
pinch-to-zoom even when a website sets user-scalable=no in the
viewport.

So as far as I understand, we are sh** out of luck.

回复 原文
看海 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();
});
回复 原文
随风而去 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;
}
回复 原文
骄傲 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);
回复 原文
儭儭莪哋寶赑 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.

回复 原文
唠甜嗑 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;
}

回复 原文
梨涡 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;
}
回复 原文
深者入戏 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.

回复 原文
瞎闹 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 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

離殇

文章 0 评论 0

小姐丶请自重

文章 0 评论 0

Aik

文章 0 评论 0

国产ˉ祖宗

文章 0 评论 0

猥琐帝

文章 0 评论 0

半仙

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文