»
(005)禁止手机端缩放
Ionic除去打包的壳也是一套H5的UI,它用的代码框架是Angular。
在做Ionic版Up-Task软件的时候,发现双指随意就能放大屏幕内容,屏幕内容放大后并没有自动缩小。而且,所有的手机浏览器都是一样的效果。
于是,百度查找了解决的办法。最后,在试验之后得到了简单的一个CSS设置禁止双指缩放屏幕的代码:
html {
touch-action: none;
/*touch-action的取值有(可以取多个):
auto(自动)、
none(禁止所有动作,所以直接禁止了缩放)、
pan-x(允许x轴动作)、
pan-y(允许y轴动作)、
manipulation(只允许滚动和手势缩放)、
pinch-zoom(启用双击缩放)
*/
height: 100%;
width: 100%;
}
none:此方法禁用缩放的同时,会禁用拖动页面滚动。
而,适用于文章类型的禁用缩放效果,只能通过js来实现。因为,需要允许用户上下滑动来浏览页面,所以,不能完全禁用touch-action。而,pan-y样式会放开Android浏览器上的双指缩放功能。所以,只能通过js来判断和控制触摸动作:
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {//触摸点数大于1时,禁止触摸事件
event.preventDefault();
}
}, { passive: false });
————www.v-signon.com学习者共勉