我制作了一个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)
});
其他回答
如果你的网站是为移动设备设计的,你可以决定不允许扩展。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
这解决了移动页面或表单“浮动”的问题。
顺便说一下,如果您使用Bootstrap,您可以只使用此变体:
.form-control {
font-size: 16px;
}
使用(悬停:无)和(指针:粗略)以所有触摸屏设备为目标:
这里的许多答案都依赖于部署JavaScript或jQuery。
但它应该(而且是)完全可以用CSS控制条件字体表示等问题。
Safari Mobile要求(有充分的理由)与任何表单元素交互时,其最小字体大小必须为16px(或视觉等效值)。
让我们致力于让经过深思熟虑的用户体验应用于所有触摸屏浏览器。
然后我们可以采取以下措施:
@media only screen and (hover: none) and (pointer: coarse) {
input,
select,
textarea {
font-size: 11px;
}
input:focus,
select:focus,
textarea:focus {
font-size: 16px;
}
}
结果
当使用触摸屏设备时,当上面的任何交互式表单元素被聚焦时,该表单元素的字体大小被临时设置为16px。
这反过来会禁用iOS Safari Mobile自动缩放。
用户初始化的捏缩缩放在所有设备上都不受影响,并且永远不会被禁用。
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于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)
});
由于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>
推荐文章
- 使伸缩项目正确浮动
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何触发自动填充在谷歌Chrome?
- 创建圈div比使用图像更容易的方法?
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 如何在iOS中使用Swift编程segue
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?
- 如何删除和清除所有的本地存储数据
- 强制打开“另存为…”弹出打开文本链接点击PDF在HTML
- 如何修改标签文本?
- 在HTML中还有其他有用的空格码吗,比如半空格的 , em-spaces, en-spaces等等?