我正在创建一个移动网页,基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上),每次我点击一些输入,整个页面都会放大到那里,掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
我正在创建一个移动网页,基本上是一个大的形式与几个文本输入。
然而(至少在我的Android手机上),每次我点击一些输入,整个页面都会放大到那里,掩盖页面的其余部分。是否有一些HTML或CSS命令禁用这种缩放移动网页?
当前回答
使用这篇文章和其他一些文章,我设法将其整理出来,以便使用以下代码兼容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" />';
}
?>
其他回答
<header>
<meta name="viewport" content="user-scalable=no">
</header>
纯“user-scalable=no”就足够了,排除其他宽度和缩放参数就可以了。在我的情况下,我只是简单地在我的。在iOS 16上测试。
对于那些晚到派对的人来说,kgutteridge的答案对我来说不适用,Benny Neugebauer的答案包括目标密度(一个被弃用的功能)。
然而,这对我来说是有效的:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
使用这篇文章和其他一些文章,我设法将其整理出来,以便使用以下代码兼容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" />';
}
?>
这可能会对某些人有所帮助:在iOS上,我的问题通过将<button>s交换为<div>s以及其他提到的事情来解决。
你可以使用:
<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" />