Joh*_*ski 32 html jquery html5 input zoom
我整天都在寻找解决方案,这个网站不断涌现,为什么不问你们.
我正在构建我们公司的移动网站,我们希望禁用自动缩放移动设备用于在他们关注时放大文本/搜索/电子邮件输入.我正在HTML5中构建网站,并看到/测试了
<meta name="viewport" content="width=device-width, user-scalable=no" />
解决方案.具有各种属性(即最小比例= #,最大比例=#")这适用于我正在测试的几乎所有移动设备.只有一个问题.我希望用户能够放大/缩小他们的休闲.(我们有更高分辨率的产品拍摄,很高兴看到近距离拍摄)
如何在单击输入标签时禁用放大,同时保留完整的手动用户缩放控制？
ps该网站也使用jQuery.所以使用它的任何想法可能会有所帮
谢谢Jrak
Sco*_*ott 29
设置这样的元标记<head>对我有用:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
dlo*_*dlo 11
请参阅:禁用输入"文本"标签中的自动缩放 - iPhone上的Safari
我找不到干净的方式,但是这里有一个黑客......
1)我注意到鼠标悬停事件发生在缩放之前,但是缩放发生在mousedown或焦点事件之前.
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" />');
}
这绝对是一个黑客......可能存在鼠标悬停/下降并不总是捕获进入/退出的情况,但它在我的测试中运行良好并且是一个可靠的开始.
小智 6
我花了一段时间才找到它,但这里是我发现的最好的代码...... 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));
});
| 归档时间： |
|
| 查看次数： |
59547 次 |
| 最近记录： |