我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
我使用了上面Christina的解决方案,但对引导程序进行了小修改,并将另一条规则应用于桌面计算机。Bootstrap的默认字体大小为14px,这会导致缩放。下面将Bootstrap中的“表单控件”更改为16px,以防止缩放。
@media screen and (-webkit-min-device-pixel-ratio:0) {
.form-control {
font-size: 16px;
}
}
对于非移动浏览器,返回到14px。
@media (min-width: 768px) {
.form-control {
font-size: 14px;
}
}
我尝试使用.formcontrol:focu,它将其保持在14px,但focus将其更改为16px,它没有解决iOS8的缩放问题。至少在我使用iOS8的iPhone上,字体大小必须是16px才能对焦,这样iPhone才能不缩放页面。
其他回答
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于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)
});
即使有了这些答案,我也花了三天的时间才弄清楚到底发生了什么,我可能在未来再次需要解决方案。
我的情况与所描述的略有不同。
我在页面的一个div中有一些内容可编辑的文本。当用户单击一个不同的div(一个排序按钮)时,我自动选择了contenteditable div中的一些文本(之前已保存并清除的选择范围),对该选择运行一个富文本execCommand,然后再次清除。
这使我能够根据用户与页面上其他地方的颜色分隔符的交互无形地更改文本颜色,同时保持选择的正常隐藏状态,让他们在适当的上下文中看到颜色。
好吧,在iPad的Safari上,单击颜色分区会导致屏幕上的键盘出现,我所做的一切都不会阻止它。
我终于弄明白iPad是如何做到这一点的。
它监听触发可编辑文本选择的触摸开始和触摸结束序列。
当这种组合发生时,它会显示屏幕键盘。
实际上,它在放大可编辑文本的同时展开基础页面。我花了一天时间才明白我看到了什么。
因此,我使用的解决方案是拦截这些特定颜色div上的touchstart和touchend。在这两个处理程序中,我停止传播和冒泡,并返回false。但在touchend事件中,我触发的行为与单击触发的行为相同。
所以,在之前,Safari触发了我认为是“touchstart”、“mousedown”、“touchend”、“mouseup”、“click”的操作,因为我的代码,一个文本选择,按照这个顺序。
由于拦截而产生的新序列只是文本选择。在Safari处理和执行键盘操作之前,其他所有内容都会被拦截。touchstart和touchend拦截也防止触发鼠标事件,在上下文中这是完全正常的。
我不知道更简单的方法来描述这一点,但我认为这里有它很重要,因为我在第一次遇到这个问题的一小时内就找到了这个线索。
我有98%的把握,同样的修复方法也适用于输入框和其他任何东西。拦截触摸事件并单独处理它们,而不让它们传播或冒泡,并考虑在微小超时后进行任何选择,以确保Safari不会将该序列识别为键盘触发器。
经过一段时间的尝试,我想出了这个解决方案
// set font-size to 16px to prevent zoom
input.addEventListener("mousedown", function (e) {
e.target.style.fontSize = "16px";
});
// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
e.target.style.fontSize = "";
});
在“mousedown”时,它将输入的字体大小设置为16px。这将阻止缩放。在焦点事件中,它将字体大小更改回初始值。
与之前发布的解决方案不同,这将允许您将输入的字体大小设置为任意大小。
不用简单地将字体大小设置为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无输入缩放,像素完美方式
我最近(今天:D)不得不整合这种行为。为了不影响原始设计字段,包括combo,我选择在字段的焦点处应用转换:
input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
font-size: 16px;
}
推荐文章
- 我可以嵌套一个<按钮>元素内< >使用HTML5?
- 设置TextView文本从html格式的字符串资源在XML
- 为什么我的球(物体)没有缩小/消失?
- Twitter Bootstrap 3 Sticky Footer
- CSS在特定的“内联块”项之前/之后换行
- 很好的初学者教程socket.io?
- 我如何获得图像缩放功能?
- 点击下载Href图片链接
- HtmlSpecialChars在JavaScript中等价于什么?
- 我如何删除背景图像在css?
- 如何克服HTML表单嵌套的限制?
- 如何使Bootstrap 4卡在卡列相同的高度?
- 使用域集图例引导
- 音频停止功能
- 如何禁用谷歌翻译从HTML在Chrome