时间戳

首页 > 解决方案 > iOS Safari 放大输入框

html - iOS Safari 放大输入框

问题描述

目前最新的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;
        }
    }
}

可以通过设置字体大小来防止缩放，但是如果我们想要缩放但只是为了取消缩放呢？这可能吗？

标签： htmlcssios

解决方案

还像这样添加元标记user-scalable=no：

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

推荐阅读