»
(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学习者共勉