我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于FastClick,我建议将其添加到所有移动网站,以帮助实现“快速”。调整“视口宽度”以满足您的需要。
// disable autozoom when input is focused
var $viewportMeta = $('head > meta[name="viewport"]');
$('input, select, textarea').bind('touchend', function(event) {
$viewportMeta.attr('content', 'width=640, user-scalable=0');
setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
});
其他回答
总之,答案是:将表单元素的字体大小设置为至少16px
由于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>
令人惊讶的是,这里有很多javascript和视口的答案,只有一个提到了文本大小调整,这是我认为最好的解决方案。
您可以将此设置为无。
添加以下CSS:
* {
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
即使有了这些答案,我也花了三天的时间才弄清楚到底发生了什么,我可能在未来再次需要解决方案。
我的情况与所描述的略有不同。
我在页面的一个div中有一些内容可编辑的文本。当用户单击一个不同的div(一个排序按钮)时,我自动选择了contenteditable div中的一些文本(之前已保存并清除的选择范围),对该选择运行一个富文本execCommand,然后再次清除。
这使我能够根据用户与页面上其他地方的颜色分隔符的交互无形地更改文本颜色,同时保持选择的正常隐藏状态,让他们在适当的上下文中看到颜色。
好吧,在iPad的Safari上,单击颜色分区会导致屏幕上的键盘出现,我所做的一切都不会阻止它。
我终于弄明白iPad是如何做到这一点的。
它监听触发可编辑文本选择的触摸开始和触摸结束序列。
当这种组合发生时,它会显示屏幕键盘。
实际上,它在放大可编辑文本的同时展开基础页面。我花了一天时间才明白我看到了什么。
因此,我使用的解决方案是拦截这些特定颜色div上的touchstart和touchend。在这两个处理程序中,我停止传播和冒泡,并返回false。但在touchend事件中,我触发的行为与单击触发的行为相同。
所以,在之前,Safari触发了我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”的操作,因为我的代码,一个文本选择,按照这个顺序。
由于拦截而产生的新序列只是文本选择。在Safari处理和执行键盘操作之前,其他所有内容都会被拦截。touchstart和touchend拦截也防止触发鼠标事件,在上下文中这是完全正常的。
我不知道更简单的方法来描述这一点,但我认为这里有它很重要,因为我在第一次遇到这个问题的一小时内就找到了这个线索。
我有98%的把握,同样的修复方法也适用于输入框和其他任何东西。拦截触摸事件并单独处理它们,而不让它们传播或冒泡,并考虑在微小超时后进行任何选择,以确保Safari不会将该序列识别为键盘触发器。
一条关于将字体大小设置为16px的顶级答案的评论询问了这是如何解决的,如果你想要更大/更小的字体怎么办。
我不知道你们所有人的情况,但使用px来调整字体大小并不是最好的方法,你应该使用它们。
我在我的响应网站上遇到了这个问题,我的文本字段大于16像素。我的表单容器设置为2em,输入字段设置为1.4em。在移动查询中,我根据视口更改html字体大小。由于默认的html是10,我的输入字段在桌面上计算为28px
为了取消自动缩放,我不得不将输入更改为1.6em。这将我的字体大小增加到32px。只是稍微高一点,几乎看不到。在我的iPhone 4和5上,我将html字体大小改为15像素(纵向),改回10像素(横向)。看起来像素大小的最佳点是48px,这就是为什么我从1.4em(42px)改为1.6em(48px)。
你需要做的事情是找到字体大小的最佳位置,然后将其转换为rem/em大小。