我已经更新我的iPhone 6加至10的iOS beta版本,只是发现,在移动Safari浏览器,您可以通过双击放大任何网页或捏忽略了user-scalable=no
在meta标签代码。我不知道这是错误还是功能。如果将其视为功能,我们如何禁用iOS 10 Safari的视口缩放功能?
在iOS 11/12发行版上进行了更新,iOS 11和iOS 12野生动物园仍然不遵守user-scalable=no
meta标签。
我已经更新我的iPhone 6加至10的iOS beta版本,只是发现,在移动Safari浏览器,您可以通过双击放大任何网页或捏忽略了user-scalable=no
在meta标签代码。我不知道这是错误还是功能。如果将其视为功能,我们如何禁用iOS 10 Safari的视口缩放功能?
在iOS 11/12发行版上进行了更新,iOS 11和iOS 12野生动物园仍然不遵守user-scalable=no
meta标签。
Answers:
可以防止在iOS 10的safari中阻止网页缩放,但这将需要您做更多的工作。我认为这种论点是,一定程度的困难应该阻止那些热衷于货物的开发人员将“ user-scalable = no”放到每个视口标签中,并使视力受损的用户不必要地感到困难。
不过,我还是希望Apple改变其实现方式,以便有一种简单的(元标记)方式来禁用双击放大功能。大多数困难都与这种互动有关。
您可以使用以下方式停止缩放:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, false);
请注意,如果有更深层的目标对该事件调用stopPropagation,则该事件将不会到达文档,并且此侦听器也不会阻止扩展行为。
禁用双击放大是相似的。您可以禁用在上一次点击后300毫秒内发生的对文档的任何点击:
var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
var now = (new Date()).getTime();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
如果您没有正确设置表单元素,则专注于输入将自动缩放,并且由于您大多禁用了手动缩放,因此现在几乎无法取消缩放。确保输入的字体大小> = 16px。
如果您尝试在本机应用程序的WKWebView中解决此问题,则上面给出的解决方案是可行的,但这是更好的解决方案:https ://stackoverflow.com/a/31943976/661418 。就像其他答案中提到的那样,在iOS 10 beta 6中,Apple现在提供了标记来纪念meta标签。
2017年5月更新:我用一种更简单的'check event.scale on touchmove'方法代替了禁用pinz-zoom的旧的'touchstart上的check touches length'方法。应该对每个人都更可靠。
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
,如果浏览器不遵守该元标记,那将是非常糟糕的浏览器设计。另一个类似非常糟糕的设计的问题是通过滑动来实现后退/前进动作,这在iOS 9/10中无法避免。它严重破坏了Web应用程序内部的拖动动作。
preventDefault
启用禁用缩放和滚动touchmove
。您不能(完全)禁用缩放而不禁用滚动。
If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.
这是iOS 10中的新功能。
从iOS 10 beta 1发行说明:
- 为了提高Safari中网站的可访问性,即使网站设置
user-scalable=no
在视口中,用户现在也可以捏缩放。
我希望我们很快就会看到JS加载项以某种方式禁用它。
我已经能够使用touch-action
单个元素的css属性来解决此问题。尝试设置touch-action: manipulation;
通常被单击的元素,例如链接或按钮。
touch-action: none;
自己控制所有手势。
touch-action: none
唯一的manipulatoin
,这让夹变焦的问题,因为它是。
看来此行为在最新的beta中有所更改,在撰写本文时为beta 6。
从iOS 10 Beta 6的发行说明中:
WKWebView
现在默认为user-scalable=no
从视口开始尊重。的客户WKWebView
可以提高可访问性,并允许用户通过设置捏到变焦的所有页面WKWebViewConfiguration
属性ignoresViewportScaleLimits
来YES
。
但是,在我的测试(非常有限)中,我还不能确定是否确实如此。
编辑:已验证,iOS 10 Beta 6 user-scalable=no
默认情况下对我而言。
WKWebView
不是 Safari。资料来源:我们的一个地图应用程序坏了,我们不知道如何解决。
WKWebView
以为原始问题是WKWebView
在编写答案时问到的。因此,我想在第一个Beta版本中,Apple更改了WKWebView
移动Safari和移动Safari 的行为,然后在Beta 6中,他们恢复了行为,WKWebView
但保留了移动Safari 的行为。
user-scalable=no
。我不确定为什么他们会撤消此操作,只是将其恢复原状,然后再次将其删除。
在撰写本文时,此方法在Mobile Safari中的解决方法是将第三个参数addEventListener
设为{ passive: false }
,因此完整的解决方法如下所示:
document.addEventListener('touchmove', function (event) {
if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
您可能要检查是否支持选项以保持向后兼容。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
。
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
和<meta name="HandheldFriendly" content="true">
我花了大约一个小时寻找一个更强大的javascript选项,但没有找到。碰巧的是,在过去的几天中,我一直在摆弄Hammer.js(Hammer.js是一个可让您轻松操纵各种触摸事件的库),但大多数情况下我都无法做到。
有了这一警告,并且理解我绝不是JavaScript专家,这是我想出的一个解决方案,它基本上利用了Hammer.js来捕获捏缩放和双击事件,然后记录并丢弃它们。
确保在页面中包含Hammer.js,然后尝试将此javascript放在头部的某个位置:
< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >
// SPORK - block pinch-zoom to force use of tooltip zoom
$(document).ready(function() {
// the element you want to attach to, probably a wrapper for the page
var myElement = document.getElementById('yourwrapperelement');
// create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
var hammertime = new Hammer(myElement, {
prevent_default: false,
touchAction: "pan"
});
// pinch is not enabled by default in hammer
hammertime.get('pinch').set({
enable: true
});
// name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
console.log('captured event:', e.type);
e.preventDefault();
})
});
</script>
.preventDefault
所有锤子手势处理程序添加A 来防止视口缩放。我一起使用滑动/捏/平移/敲击,将其添加到所有处理程序中,我不知道是否有特定的功能正在执行。
我尝试了有关捏缩放的先前答案
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
但是有时当event.touches.length> 1时,屏幕仍会缩放, 我发现最好的方法是使用touchmove事件,以避免任何手指在屏幕上移动。该代码将是这样的:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);
希望会有所帮助。
检查触摸事件中的比例因子,然后防止触摸事件。
document.addEventListener('touchmove', function(event) {
event = event.originalEvent || event;
if(event.scale > 1) {
event.preventDefault();
}
}, false);
通过注入一个样式规则并拦截缩放事件,我们可以获得所需的一切:
$(function () {
if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
$(document.head).append(
'<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
)
$(window).on('gesturestart touchmove', function (evt) {
if (evt.originalEvent.scale !== 1) {
evt.originalEvent.preventDefault()
document.body.style.transform = 'scale(1)'
}
})
})
✔禁用捏变焦。
✔禁用双击缩放。
✔滚动不受影响。
✔禁用点击突出显示(在iOS上由样式规则触发)。
注意:根据您的喜好调整iOS检测。在这里更多。
对lukejackson和Piotr Kowalski表示歉意,他们的答案在上面的代码中以修改的形式出现。
addEventListener
基于答案之一并将其{ passive: false }
作为options
参数而不是进行纠正false
。但是,为了向后兼容,false
除非passive
支持选项字段,否则需要通过。见developer.mozilla.org/en-US/docs/Web/API/EventTarget/...
我想出了一个非常幼稚的解决方案,但是它似乎有效。我的目标是防止意外的两次抽头被解释为放大,同时保持缩小以确保可访问性。
这个想法是通过双击测量第一次touchstart
和第二次之间的时间touchend
,然后touchend
如果延迟太小,则将最后一次解释为点击。在防止意外缩放的同时,此方法似乎可以使列表滚动不受影响,这很好。不知道我是否没有错过任何东西。
let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;
document.addEventListener('touchstart', () => {
preLastTouchStartAt = lastTouchStartAt;
lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
const touchEndAt = +new Date();
if (touchEndAt - preLastTouchStartAt < delay) {
event.preventDefault();
event.target.click();
}
});
在我的特定情况下,我使用Babylon.js创建3D场景,我的整个页面都包含一个全屏画布。3D引擎具有自己的缩放功能,但在iOS上,捏缩放功能会对此产生干扰。我更新了@Joseph答案以解决我的问题。要禁用它,我发现我需要将{passive:false}作为选项传递给事件侦听器。以下代码对我有用:
window.addEventListener(
"touchmove",
function(event) {
if (event.scale !== 1) {
event.preventDefault();
}
},
{ passive: false }
);
听起来很奇怪,至少对于iOS 10.2中的Safari而言,如果您的元素或其任何祖先具有以下任一状态,则无法进行双击缩放:
cursor: pointer
在CSS集在以下情况下会发生意外缩放:
为防止双击行为,我发现了两个非常简单的解决方法:
<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>
这两个都阻止Safari(iOS 10.3.2)放大按钮。如您所见,一个仅是JavaScript,另一个是CSS。适当使用。
这是一个演示:https : //codepen.io/lukejacksonn/pen/QMELXQ
我尚未尝试阻止这种捏举行为(尚未),主要是因为我倾向于不为网络创建多点触摸界面,其次,我回想了一个想法,即包括本机应用程序UI在内的所有界面都应该“缩小” -可以在某些地方使用。我还是设计,避免用户有这样做是为了让你的用户界面访问他们,不惜一切代价。
发现此简单的解决方法似乎可以防止双击放大:
// Convert touchend events to click events to work around an IOS 10 feature which prevents
// developers from using disabling double click touch zoom (which we don't want).
document.addEventListener('touchend', function (event) {
event.preventDefault();
$(event.target).trigger('click');
}, false);
我在iOS(iPhone 6,iOS 10.0.2)上的页面中实际检查了以上所有答案,但均未成功。这是我的工作解决方案:
$(window).bind('gesturestart touchmove', function(event) {
event = event.originalEvent || event;
if (event.scale !== 1) {
event.preventDefault();
document.body.style.transform = 'scale(1)'
}
});
这为我工作:
document.documentElement.addEventListener('touchmove', function (event) {
event.preventDefault();
}, false);