我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?


当前回答

不用简单地将字体大小设置为16px,您可以:

设置输入字段的样式,使其大于预期大小,允许将逻辑字体大小设置为16px。使用scale()CSS转换和负边距将输入字段缩小到正确的大小。

例如,假设输入字段最初的样式为:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

如果通过将所有维度增加16/12=133.33%来放大字段,然后使用scale()将其减少12/16=75%,则输入字段将具有正确的视觉大小(和字体大小),并且焦点上不会有缩放。

由于scale()只影响视觉大小,因此还需要添加负边距以减小字段的逻辑大小。

使用此CSS:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

输入字段的逻辑字体大小为16px,而文本大小为12px。

我有一篇博客文章,在这里我将稍微详细介绍一下,并将此示例作为可查看的HTML:iPhone上Safari无输入缩放,像素完美方式

其他回答

这个问题的简单解决方案是:

@media screen and (max-width: 599px) {
  input, select, textarea {
    font-size: 16px;
  }
}

注:最大宽度可根据您的要求定制。

我花了一段时间才找到它,但这是我找到的最好的代码。。。。。。http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

受@jirikuchta的回答启发,我通过添加以下CSS解决了这个问题:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

没有JS,我没有注意到任何闪光或任何东西。

值得注意的是,最大比例为1的视口也可以工作,但当页面作为iframe加载时,或者如果您有其他脚本修改视口等,则无法工作。

input[type='text'],textarea {font-size:1em;}

由于iPhone上的自动放大(没有缩小)功能仍在运行,这里有一个基于dlo建议的JavaScript,用于聚焦/模糊。

一旦文本输入被功能化并在输入离开时重新合成,缩放将被禁用。

注意:有些用户可能不欣赏在小文本输入中编辑文本!因此,我个人更喜欢在编辑过程中更改输入的文本大小(参见下面的代码)。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

以下代码将在元素具有焦点期间将输入的文本大小更改为16像素(即,以当前缩放大小计算)。因此,iPhone不会自动放大。

注:缩放因子是根据window.innerWidth和iPhone的320像素显示屏计算的。这仅对处于肖像模式的iPhone有效。

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>