Question

我正在创建一个移动网页，它基本上是一个包含多个文本输入的大表单。

然而（至少在我的Android手机上），每次点击某些输入时，整个页面都会缩放，遮挡页面的其余部分。是否有一些HTML或CSS命令可以在moble网页上禁用这种缩放？

Answer 1

这应该是你需要的一切

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

Answer 2

对于那些迟到的人来说，kgutteridge的回答对我不起作用，而Benny Neugebauer的回答包括target-densitydpi（a feature that is being deprecated）。

但这对我有用：

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

Answer 3

这里有很多方法 - 虽然位置是 通常用户不应受到限制 ，但在进行可访问性缩放时，可能会出现这种情况在哪里需要：

以设备宽度渲染页面，不要缩放：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

防止缩放 - 并阻止用户进行缩放：

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

删除所有缩放，全部缩放

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Answer 4

您可以使用：

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

但请注意， Android 4.4 属性target-densitydpi is no longer supported。因此，对于Android 4.4及更高版本，建议将以下内容作为最佳做法：

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

Answer 5

似乎只是将meta标签添加到index.html并不妨碍页面缩放。添加以下样式将起到神奇作用。

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

编辑：演示：https://no-mobile-zoom.stackblitz.io

Answer 6

由于最初的问题仍然没有解决办法，所以这里我的纯CSS两分钱。

移动浏览器（大多数）要求输入中的字体大小为16px。所以

＆＃13;

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

＆＃13;

解决了这个问题。因此，您不需要禁用站点的缩放和松散辅助功能。

如果您的基本字体大小不是手机上的16px或16px，则可以使用媒体查询。

＆＃13;

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

＆＃13;

Answer 7

请尝试添加此元标记和样式

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


<style>
body{
        touch-action: manipulation;
    }
</style>

Answer 8

您只需将以下'meta'元素添加到“head”中即可完成任务：

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

添加“width”，“initial-scale”，“maximum-width”，“maximum-scale”等所有属性可能无法正常工作。因此，只需添加上述元素即可。

Answer 9

Web应用程序的可能解决方案：虽然无法再在iOS Safari中禁用缩放功能，但从主屏幕快捷方式打开网站时将禁用缩放功能。

添加以下元标记以将您的应用声明为“具有Web应用功能”：

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

但是仅仅在您的应用程序自持时使用此功能，因为前进/后退按钮和URL栏以及共享选项已禁用。（尽管您仍然可以左右滑动），但是这种方法可以启用ux之类的应用程序。全屏浏览器仅在从主屏幕加载网站时启动。我还只有在我的根文件夹中包含apple-touch-icon-180x180.png后，它才能正常工作。

作为奖励，您可能还希望包括该变量的一种变体：

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

Answer 10

DELIMITER //

CREATE PROCEDURE submitOrder(
IN customerId INT, 
IN productId INT, 
IN qty INT, 
OUT orderId INT)
BEGIN
DECLARE orderId, storeId, staffId, qty, customerId, productId INT; 
DECLARE listPrice DECIMAL(10,2); 
DECLARE discount DECIMAL(4,2);

SELECT MAX(order_id)+1 FROM orders INTO @orderId;

SELECT s.store_id
FROM stocks AS s
INNER JOIN products AS p USING (product_id)
WHERE p.product_id = s.product_id
ORDER BY s.quantity DESC
LIMIT 1
INTO @storeId;

SELECT staffs.staff_id 
FROM staffs
INNER JOIN stores
WHERE staffs.store_id = stores.store_id
LIMIT 1
INTO @staffID; 

SET @qty = 1;

SELECT products.product_id
FROM products
WHERE products.product_id = productId;

SELECT products.list_price
FROM products
INTO @listPrice;

INSERT INTO orders VALUES (
@orderId, @customerId, 1, CURDATE(), ADDDATE(CURDATE(), INTERVAL 7 day), NULL, @storeId, @staffId);

INSERT INTO order_items
VALUES (@orderId, 1, @productId, @qty, @listPrice,0);

END//

DELIMITER ;

请将该脚本添加到“禁用捏”，点击并聚焦“缩放”

Answer 11

使用 meta-tag 的解决方案对我不起作用（在 Chrome win10 和 safari IOS 14.3 上测试），而且我也相信 Jack 和其他人提到的有关可访问性的担忧应该受到尊重.

我的解决方案是仅对被默认缩放损坏的元素禁用缩放。

我通过为缩放手势注册事件侦听器并使用 event.preventDefault() 抑制浏览器默认缩放行为来做到这一点。

这需要通过多个事件（触摸手势、鼠标滚轮和按键）来完成。以下代码段是触摸板上鼠标滚轮和捏合手势的示例：

noteSheetCanvas.addEventListener("wheel", e => {
        // suppress browsers default zoom-behavior:
        e.preventDefault();

        // execution my own custom zooming-behavior:
        if (e.deltaY > 0) {
            this._zoom(1);
        } else {
            this._zoom(-1);
        }
    });

此处描述了如何检测触摸手势：https://stackoverflow.com/a/11183333/1134856

我使用它来保持应用程序大部分部分的标准缩放行为，并在画布元素上定义自定义缩放行为。

Answer 12

使用这篇文章和其他一些文章，我设法解决了这个问题，以便使用以下代码与 Android 和 iPhone/iPad/iPod 兼容。这是针对 PHP 的，您可以将相同的概念用于任何其他语言的字符串搜索。

<?php //Device specific headers
$iPod    = stripos($_SERVER['HTTP_USER_AGENT'],"iPod");
$iPhone  = stripos($_SERVER['HTTP_USER_AGENT'],"iPhone");
$iPad    = stripos($_SERVER['HTTP_USER_AGENT'],"iPad");
$Android = stripos($_SERVER['HTTP_USER_AGENT'],"Android");
$webOS   = stripos($_SERVER['HTTP_USER_AGENT'],"webOS");

if($iPhone || $iPod || $iPad){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />';
} else {
    echo '<meta name="viewport" content="width=device-width, initial-scale=1.0" />';
}

?>

Answer 13

document.addEventListener('dblclick', (event) => {
    event.preventDefault()
}, { passive: false });

如何在移动网页上“禁用”缩放？

13 个答案: