我如何“禁用”缩放移动网页?

我正在创建一个移动网页，基本上是一个大的形式与几个文本输入。

然而(至少在我的Android手机上)，每次我点击一些输入，整个页面都会放大到那里，掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?

当前回答

这应该是你需要的一切:

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

2010-12-17 17:02:44

其他回答

你可以使用:

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

但是请注意，Android 4.4不再支持target-densitydpi属性。因此，对于Android 4.4及以后版本，建议采用以下最佳实践:

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

2012-08-22 12:10:26

似乎仅仅在index.html中添加元标签并不能阻止页面缩放。添加下面的样式会有神奇的效果。

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

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

2020-03-03 22:08:12

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

2020-11-01 10:01:36

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

纯“user-scalable=no”就足够了，排除其他宽度和缩放参数就可以了。在我的情况下，我只是简单地在我的。在iOS 16上测试。

2022-12-04 06:44:42

使用这篇文章和其他一些文章，我设法将其整理出来，以便使用以下代码兼容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" />';
}

2021-05-28 15:38:40

我如何“禁用”缩放移动网页?

推荐文章

最新文章

标签