logo标签列表

在移动网络上禁用捏合缩放

htmlcssmobile-websiteviewport
98
17
如果您正在为一个总部位于英国的组织创建网站，我希望您不要禁用“双指缩放”功能（这实际上是一种辅助功能），因为这将违反多项法律，积极歧视视觉障碍者。禁用此功能从来没有任何好处... 永远不应该这样做！ - Mike Insch
27
并不总是一个坏主意。如果你正在制作像网页一样的应用程序，那么这就是我会做的。你并不总能使用应用商店，所以这是下一个最好的选择。 - Shumii
13
请停止这样做。视觉障碍者无法在不放大网页的情况下查看它们，这使我们的生活更加困难。 - Jack Marchetti
60
您能想象制作一个类似“谷歌地图”的应用程序，第一次捏合缩放后，您无法再看到文本输入框？或者版权符号？有时候，您不想让整个应用程序都缩放。有时候，您只需要其中一部分缩放即可。 - Ayelis
14
如果您正在设计一个响应式单页Web应用程序，捏合缩放（也称自动缩放）会严重干扰工作流程，因为如果您在空白区域不小心双击，浏览器会自动放大页面。 - Tower Jimmy
显示剩余13条评论
12个回答
205

编辑: 因为这一直被评论，我们都知道我们不应该这样做。问题是我应该怎么做，而不是我应该不应该这么做。

把这个代码加入你的移动设备头部。然后用百分比设置宽度就可以了：

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

对于无法使用视口的设备，请添加以下内容：

<meta name="HandheldFriendly" content="true" />
44
我已经添加了那个。但我仍然可以捏和缩放。 - Harsha M V
1
这与 https://dev59.com/SG855IYBdhLWcg3wNhd1#4472910 有何不同？ - Ehtesh Choudhury
3
它们是不同的问题吗？ - SpaceBeers
1
@SpaceBeers - 除非你正在编写一个已经具有捏合缩放功能的Web应用程序。否则，第一次缩放时您将失去界面。可用性，消失了！ - Ayelis
24
2019年：渐进式 Web 应用程序（PWA）已经成为一种趋势，这是一种解决方案，可避免 PWA 在移动设备上出现奇怪行为的问题 :) - Jessy
显示剩余13条评论
18

这将阻止用户在iOS Safari中进行任何缩放操作，并且还会防止“缩放到选项卡”功能：

document.addEventListener('gesturestart', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gesturechange', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

document.addEventListener('gestureend', function(e) {
    e.preventDefault();
    // special hack to prevent zoom-to-tabs gesture in safari
    document.body.style.zoom = 0.99;
});

jsfiddle：https://jsfiddle.net/vo0aqj4y/11/

2
这在 macOS Safari 上运行良好，而且 document.body.style.zoom = 0.99; 甚至都不是必需的。 - Kevin Baragona
15

这就是我需要的全部：

<meta name="viewport" content="user-scalable=no"/>
13
6
这也将禁用滚动。 - simonwjackson
3
为了滑动页面，请使用以下代码。 html，body {touch-action: pan-x, pan-y;} （注：该代码用于禁止浏览器对页面的上下左右拖动事件进行默认处理，从而实现自定义的页面滑动效果。） - Богуслав Павлишинець
1
@БогуславПавлишинець 这将禁用多指滚动。 - duduwe
@duduwe 先生，去文档 https://developer.mozilla.org/zh-CN/docs/Web/CSS/touch-action 看看自己需要什么。祝您有愉快的一天！ - Богуслав Павлишинець
1
@БогуславПавлишинець 这只是一个FYI con（如果您不知道）在使用触摸操作时，特别是移动Web的主题，因此应考虑多点触控。 - duduwe
抱歉，我没听懂。 - Богуслав Павлишинець
11

对于所有认为这是一个不好的想法的人，我想说并不总是不好的。有时候需要缩小界面才能看到所有的内容，例如在iOS上输入时，它会自动缩放以将其置于屏幕中央，此后你需要缩小来关闭键盘，因为关闭键盘不能完成该任务。此外，当你花费很多时间来制作一个出色的布局和用户体验时，你不希望它被缩放影响布局。

但另一个观点也很有价值，对于视力问题的人来说尤其如此。然而，在我看来，如果你的眼睛有问题，你已经在使用系统的缩放功能，因此没有必要打扰内容。

5
你应该将这作为评论发布。 - Awesomeness01
3
抱歉，当时我的水平不足以发布评论，只能发送新消息，这就是原因。 - Thibaut Rey
2
将表单元素的字体大小设置为16像素将防止iOS设备上的缩放。 - hellojebus
1
我可以看出你不是50多岁的人。对于我们许多人来说，不是因为我们有严重的视力问题而必须使用特殊辅助设备（甚至是老花镜），除非在使用设计师认为字体很小但完美的网页时，这些页面告诉我“我不在乎你能否阅读这个，老头子。” - fool4jesus
4
我是一位有眼睛问题的老年人，但我完全理解有时候为什么需要这样做。并不是所有的“网站”都是为了普通公众或每个社会成员而设计的，就像强制每个市民在自己的房子里安装轮椅坡道和无性别厕所一样，这是疯狂的，因为“你知道法律规定”。当然，如果您提供公共访问或雇用人员，则需要考虑这些方面的架构。例如，有些单页面网络应用游戏如果允许人们缩放界面将会受到破坏。 - unsynchronized
显示剩余2条评论
9
7

在这里找到了可以使用user-scalable=no的方法：

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

禁用iOS捏合缩放

window.addEventListener(
  "touchmove",
  function (event) {
    if (event.scale !== 1) {
      event.preventDefault();
      event.stopImmediatePropagation();
    }
  },
  { passive: false }
);

在 Safari 和 Brave 中测试过 iOS 15.3。

4
:root/html，不是 body。 - phk
4

对于仍需要这个功能的人，其他答案在较新版本的iOS中都不起作用。您只需将以下CSS代码添加到Apex页面的CSS Inline部分：

@media screen and (-webkit-min-device-pixel-ratio: 0) {

.apex-item-select:focus, .apex-item-text:focus, .apex-item-textarea:focus {

        font-size: 16px;

    }

    .apex-item-select, .apex-item-text, .apex-item-textarea {

        font-size: 16px;

    }

}

它完全解决了iOS设备中的自动缩放问题。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接