iOS Safari 放大输入框
Posted
技术标签:
【中文标题】iOS Safari 放大输入框【英文标题】：iOS Safari zoom on input box 【发布时间】：2021-02-25 11:20:29 【问题描述】：目前最新的 ios (14.4) 仍会放大任何获得焦点的输入框，除非您在没有焦点的输入上使用 16px。
这本身不是问题，但是当从该输入框中移除焦点时 - 缩放仍然存在并破坏了页面的外观。
主单页中的视口标签很好：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
反应代码：
render()
return (
<div className='my-form' style=this.props.style>
<h3>MyForm</h3>
<div>
<input
...InputGetterSetter(this, 'text')
placeholder="Please enter text"
onKeyDown=this.onKeyDown.bind(this) />
</div>
SASS 定义的 css：
.my-form
width: 100%;
height: 100%;
text-align: center;
@media screen and (-webkit-min-device-pixel-ratio:0)
select,
textarea,
input
font-size: 16px;
input
width: 66%;
text-align: center;
.bottom-button
background-color: #00ac69;
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 150px;
outline: none;
border: none;
overflow: hidden;
.keyboard-expanded
.my-form
.bottom-button
height: 60px;
.ion-ios-telephone
font-size: 22pt;
.dark
.my-form
input
color: white;
可以通过设置字体大小来防止缩放，但是如果我们想要缩放但只是为了取消缩放呢？这可能吗？
【问题讨论】：
您能更具体地谈谈您的问题吗？你也可以提供一段代码吗？ @ChristopherHolder - 添加的代码和细节已经存在。期待你的回答:-) 【参考方案1】：还像这样添加元标记user-scalable=no：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no">
【讨论】：
我们已经尝试过了，这将有助于首先禁用缩放，但事实证明，取消缩放完全是另一回事，我将在自己的答案中解释。【参考方案2】：这里的问题是它是一个使用哈希路由和页面之间的相对链接的单页面应用程序。
解决方案是在浏览网站到不同视图时将其删除并替换为完全限定的 URL - 这实现了问题的目标，使 iOS unzoom。
最后我们实际上禁用了缩放，但问题是关于如何在 iOS 上取消缩放，这就是方法。
【讨论】：
【参考方案3】：将以下元标记添加到<head></head>，
<meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes">
将以下内容添加到<script><script>标签或JS文件中，
<script>
window.addEventListener("load", afterLoaded, false);
function afterLoaded()
document.getElementById("viewport").setAttribute("content", "width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=yes");
</script>
【讨论】：
以上是关于iOS Safari 放大输入框的主要内容，如果未能解决你的问题，请参考以下文章
html5输入框左边有一个放大镜图标,右边有按钮点击触发搜索