我制作了一个HTML页面,其中有一个<input>标记,类型为“text”。当我在iPhone上使用Safari点击它时,页面会变大(自动缩放)。有人知道如何禁用此功能吗?
当前回答
这是工作!!!我完成了我的搜索旅程!
<meta name=“viewport”content=“width=640px,初始比例=.5,最大比例=.5”/>
在iPhone OS6、Android 2.3.3模拟器上测试
我有一个固定宽度为640px的移动网站,我面对的是自动变焦对焦。
我试着分配一些荡妇,但没有一个能同时在iPhone和Android上运行!
现在对我来说,禁用缩放是可以的,因为网站是移动第一设计!
这是我找到它的地方:如何调整视口大小和缩放以支持跨浏览器?
其他回答
根据斯蒂芬·沃尔什的回答。。。这段代码在不改变焦点输入的字体大小的情况下工作(看起来很蹩脚),而且它仍然适用于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)
});
input[type='text'],textarea {font-size:1em;}
使用(悬停:无)和(指针:粗略)以所有触摸屏设备为目标:
这里的许多答案都依赖于部署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自动缩放。
用户初始化的捏缩缩放在所有设备上都不受影响,并且永远不会被禁用。
我找不到干净的方法,但这里有一个黑客。。。
1) 我注意到mouseover事件发生在缩放之前,但缩放发生在mousedown或focus事件之前。
2) 您可以使用javascript动态更改META视口标记(请参阅使用javascript启用/禁用iPhone safari上的缩放?)
因此,请尝试以下操作(如jquery所示):
$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
$('head meta[name=viewport]').remove();
$('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}
这绝对是一个黑客。。。在某些情况下,mouseover/down并不总是捕捉入口/出口,但它在我的测试中运行良好,是一个坚实的开始。
2021解决方案。。。
好吧,我已经通读了所有的旧答案,但没有一个对我有用。经过几个小时的尝试,最终解决方案似乎很简单。
input{
transform: scale(0.875);
transform-origin: left center;
margin-right: -14.28%;
}
在PC上的iOS/Android/Chrome上测试
这允许您使用14px字体,如果您需要不同的大小,则缩放因子为14/16=0.875,负边距为(1-0.875)/0.875*100
我的输入有一个父级设置为“display:flex”,它会增长以适应父级,因为它具有“flex:11自动”。你可能需要,也可能不需要,但为了完整起见,我将其包括在内。