iOS Safari 放大输入框 [英] iOS Safari zoom on input box

问题描述

目前最新的 iOS (14.4) 仍然会放大任何获得焦点的输入框，除非你在没有焦点的输入上使用 16px.

这本身不是问题，但是当焦点从该输入框移开时 - 缩放仍然存在并破坏了页面的外观.

主单页中的视口标签很好:

反应代码:

render() {返回 (<div className='my-form' style={this.props.style}><h3>MyForm</h3><div><输入{...InputGetterSetter(this, 'text')}placeholder="请输入文字";onKeyDown={this.onKeyDown.bind(this)}/>

SASS 定义的 css:

.my-form {宽度:100%；高度:100%；文本对齐:居中；@media 屏幕和 (-webkit-min-device-pixel-ratio:0) {选择，文本区域，输入 {字体大小:16px；}}输入 {宽度:66%；文本对齐:居中；}.底部按钮{背景色:#00ac69；位置:绝对；底部:0；左:0；右:0；宽度:100%；高度:150px；大纲:无；边界:无；溢出:隐藏；}}.keyboard-expanded {.my-form {.底部按钮{高度:60px；.ion-ios-电话{字体大小:22pt；}}}}.黑暗的 {.my-form {输入 {白颜色;}}}

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

解决方案

这里的问题是它是一个使用哈希路由和页面之间相对链接的单页面应用程序.

一个解决方案是在将站点导航到不同视图时将其删除并替换为完全限定的 URL - 这实现了问题的目标，使 iOS unzoom.

最后我们实际上禁用了缩放，但问题是如何在 iOS 上导致取消缩放，这就是方法.

At the moment the newest iOS (14.4) will still zoom on any input box that takes focus, unless you use 16px on the input without the focus.

This alone isn't a problem, but when focus is removed from that input box - the scaling remains and destroys the appearance of the page.

Viewport tag in main single page is fine:

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

The react code:

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>

The SASS-defined 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;
        }
    }
}

It is possible to prevent zooming in the first place by setting the font size, but what if we want the zooming but just for it to unzoom? Is this possible?

解决方案

The issue here was that it was a single page app using hash routing and relative links between pages.

A solution was to remove this and replace with fully qualified URLs when navigating around the site to different views - this achieved the goal of the question, to make iOS unzoom.

In the end we actually disabled the zooming, but the question was about how to cause an unzoom to occur on iOS and this was the way.

这篇关于iOS Safari 放大输入框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！