»
005. Prohibit mobile scaling
Ionic, apart from the packaged shell, also has an H5 UI, and also uses Angular as its code framework.
When working on the Ionic version of Up Task software, I found that I could easily enlarge the screen content with my two fingers, but the screen content did not automatically shrink after being enlarged. Moreover, all mobile browsers have the same effect.
So I searched on Baidu for a solution. Finally, after the experiment, a simple code was obtained for CSS setting to prohibit double finger zooming of the screen:
html {
touch-action: none;
/*The values of touch action can be (multiple):
auto (automatic)
none (all actions are prohibited, so scaling is directly prohibited)
pan-x (allows x-axis movement)
pan-y (allows y-axis actions)
manipulation (only allows scrolling and gesture scaling)
pinch-zoom (enable double-click zoom)
*/
height: 100%;
width: 100%;
}
None: This method will disable both zooming and dragging page scrolling.
However, disabling scaling effects for article types can only be achieved using JavaScript. Because it is necessary to allow users to swipe up and down to browse the page, touch action cannot be completely disabled. And the pan-y style will release the two finger zoom function on the Android browser. So, touch actions can only be banned and controlled through JavaScript:
document.documentElement.addEventListener('touchstart', function(event) {
if (event.touches.length > 1) {//When the number of touch points is greater than 1, touch events are prohibited
event.preventDefault();
}
}, { passive: false });
---- www.v-signon.com Learninger Co-Encourage