Wan*_*ang 6 html css forms firefox android
我想在 Android Firefox(可能是 iOS Safari)上聚焦 HTML 输入字段时禁用自动缩放。
我在 SO [1,2,3] 和网络上阅读了许多相关的古老线程,但既没有找到可行的解决方案,也没有找到明确的答案,即这在 2021 年是不可能的。我唯一的测试设备是 Android手机(iOS 也可能出现这种情况),仅 Firefox 会出现此问题;Chrome 按我的预期工作。
我努力了:
font-size: 16px输入字段上的设置<meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1" /><meta name="viewport" content="width=device-width, initial-scale=1, max-scale=1, user-scalable=no">安卓 11、火狐 93.1.0
难道我想要达到的目标真的不可能实现吗?
Firefox Mobile 96 及更高版本现已修复此问题。从错误线程中可以看出,这在 94 之前的版本中不是问题,但我无法确切确认是哪个版本引入了此错误。
minimum-scale=1使用和设置元标记maximum-scale=1,例如:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1" />
Run Code Online (Sandbox Code Playgroud)
参考:错误 1738696
将来只要设置user-scalable=no一个<meta name="viewport"标签就可以了,就像设置CSS一样touch-action: manipulation。请关注Bug 1746126以获取相关更新。
为了防止输入字段在所有移动浏览器上缩放,我建议还包括user-scalable=no,只是为了覆盖所有基础。所以最终的答案是将其放入您的<head>.
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
Run Code Online (Sandbox Code Playgroud)