在移动设备上禁用缩放

Disable Zoom on mobile devices

我按照本指南为移动设备禁用缩放。

https://davidwalsh.name/zoom-mobile-browsers

正如许多其他人所建议的那样,该指南建议使用:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/> <!--320-->

我已经尝试过这个和视口的几个变体,但我无法让它工作。另外,在查看我遵循的指南中的示例时,我意识到它也不起作用。

https://davidwalsh.name/demo/mobile-viewport.php

任何关于为什么这不起作用的想法以及关于如何使其起作用的任何建议都将不胜感激!

这个应该有效:

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

您的代码没问题,问题是 iOS 具体的。引自此处关于 Whosebug 的另一个问题:

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.

在此处查看整个主题: How do you disable viewport zooming on Mobile Safari?

或者这个: disable viewport zooming iOS 10 safari?

我做了一个简单的应用。 我有机会选择 max-zoom: 3;

注意; max-zoom: 3 代码 运行 用于禁用双击。 即使添加了min-zoom: 3,这个注释也是正确的。