我正在尝试弄清楚如何重置 ios 网页中的缩放级别。似乎当用户进行捏放大/缩小时,缩放功能不再起作用。我想要捏合手势,但想以编程方式重置缩放。有人有关于使用 Javascript/jQuery 动态更改缩放的想法吗?
<meta id="viewportMeta" name="viewport" content="user-scalable=1, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />
$(document).ready(function () {
$("#zoomOut").click(function(){
$('meta[name=viewport]').attr('content', 'initial-scale=0.5; maximum-scale1; user-scalable=1;');
});
$("#zoomIn").click(function(){
$('meta[name=viewport]').attr('content', 'initial-scale=1; maximum-scale=1.0; user-scalable=1;');
});
});
最佳答案
------更新------
这在 iOS7 中不再是问题。 Scott Jehl 在 github 上有更好的修复 scottjehl/iOS-Orientationchange-Fix适用于 iOS6。
------原答案------
从这些中获取答案:
- iPad layout scales up when rotating from portrait to landscape
- How do I reset the scale/zoom of a web app on an orientation change on the iPhone?
Jeremy Keith ( @adactio ) 在他的博客 Orientation and scale 上对此有一个很好的解决方案。
通过不在标记中设置最大比例来保持标记的可扩展性。
<meta name="viewport" content="width=device-width, initial-scale=1">
然后在加载时使用 javascript 禁用可扩展性,直到使用此脚本再次允许可扩展性时手势启动:
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.body.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
}, false);
}
}
关于jquery - 如何使用 Javascript 动态更改缩放级别?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14249364/