What are some ways to prevent pinch zoom on an HTML webpage?

Searching for a way to disable pinch-to-zoom on an HTML web page has proven to be a daunting task. Despite numerous attempts, I have yet to find a solution that works. I am reaching out in the hopes that you may have the answer. Some of the methods I have experimented with include...

1.

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Wow</title>
</head>
<head>
    <script>
        document.addEventListener("gesturestart", function (e) {
            e.preventDefault();
            document.body.style.zoom = 0.99;
        });
        document.addEventListener("gesturechange", function (e) {
            e.preventDefault();
            document.body.style.zoom = 0.99;
        });
        document.addEventListener("gestureend", function (e) {
            e.preventDefault();
            document.body.style.zoom = 1;
        });
    </script>
</head>
body {
    touch-action: none;
}

Your assistance in this matter would be greatly appreciated.

Answer №1

So far, this solution is effective for my needs. It effectively disables pinch zoom while still allowing for scrolling.

*
    touch-action: pan-x pan-y !important

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to transform Vue JS templates into clean HTML code?

Hello, I've received a request to convert a full VueJS template into pure HTML for use in Angular. While I have access to all of Vue's files and codebase, I'm wondering if there's a fast method to convert these templates into standard ...

What sets index.js apart from _app.js in NextJs?

Can anyone shed some light on the distinction between the index.js file and _app.js? I'm following the Next tutorial and it instructs me to modify the index.js, but when I check the rendered output, it's actually _app.js. Can someone clarify this ...

Utilizing Bootstrap and flexbox to create a card: repositioning the image to the left or right

Currently, I am attempting to construct a card layout using Bootstrap 4 with flexbox enabled. The image below depicts my current implementation, which is functioning as expected. https://i.sstatic.net/huXvo.jpg Here is the HTML structure: <section> ...

Is there a way to temporarily halt a CSS animation when it reaches the final frame

Can anyone assist me with getting the "-webkit-animation-fill-mode: forwards;" to work? It seems like it's getting stuck on the first frame, and I can't figure out why. JS FIDDLE <div class="logo"></div> .logo { width: 328px; ...

repeating timer modifying state within the component

Question: I have an interval set up in my component: componentDidMount(){ this.timeID=setInterval(()=>{ this.setState({ text:this.props.text+"." }) console.log(this.state.text); },1000) However, currently it only adds one dot to the text e ...

Using jQuery to make an element follow you as you scroll down a page inside a div

I've made some progress on my code: HTML <div id="header"></div> <div id="content"> <div class="sidebar-wrapper"></div> </div> <div class="session-wrapper"></div> <div id="footer"></div> ...

Ribbon design in LESS/CSS does not maintain its structure when resized in Google

My CSS/LESS ribbon is displaying perfectly in Firefox, but encountering issues in Chrome when resizing the window. At 100% zoom, everything looks good, but adjusting the zoom causes elements to become misaligned. To make it easier to troubleshoot, I' ...

Positioning an absolute div inside a relative div within a v-for loop while using VueJS and Element UI

I am experimenting with rendering a list of <el-card> items using a transition-group. Each card has a front and back side that flip when a button is clicked. To achieve a smooth flip transition, I need to apply the style: position: absolute; top: 0; ...

Place the button inside the form following another block element

Here is the HTML code I am working with: <div class="actions"> <input id="submit-car" name="commit" type="submit" value="Добавить объявление"> </div> and here is a fiddle example: http://jsfiddle.net/348U4/ In ...

Incorporating SCSS into HTML files when they are situated at the same hierarchy

I have <h1 class='title home'> My Title </h1>, and to apply styles I can use the following CSS: .title { font-size: 1.95em; } .title .home { color: black; } While this method works, I a ...

A guide on showcasing items on an html webpage through the use of javascript

Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...

The issue encountered with the Material UI Autocomplete component is that it is not displaying the values

I'm currently attempting to extract a value from the state to be used in materialUI's autocomplete component. However, I've encountered an issue: The autocomplete feature works perfectly when selecting a value and saves it to the state wit ...

What could be causing the undefined value for this.props.username in React-Redux?

I'm facing an issue when trying to access this.props.username in the following code snippet: loginClick = (event) => { event.preventDefault(); console.log('Login submit click, props.username: ' + this.props.username); this.props.lo ...

Shifting hues of dots within a grid according to the passing of time

As a newcomer to the world of coding, I have conceptualized an idea for a visually appealing clock. My goal is to visually represent the passage of time throughout the day. To achieve this, I have devised a grid system where each dot on the grid represents ...

Why styled-components namespace problem in React Rollup build?

I designed a "UI Library" to be utilized in various projects using ReactJS + TypeScript + styled-components and Rollup. However, I am currently encountering issues with conflicting classNames. I am aware that styled-components offers a plugin for creating ...

The onClick functionality for the IconComponent (dropdown-arrow) in React Material UI is not functioning properly when selecting

I have encountered a problem in my code snippet. The issue arises when I attempt to open the Select component by clicking on IconComponent(dropdown-arrow). <Select IconComponent={() => ( <ExpandMore className="dropdown-arrow" /> )} ...

Issue with utilizing display: table and overflow: hidden in Internet Explorer and Firefox, functioning properly on Webkit and Blink

JSFiddle : http://jsfiddle.net/h7xvr2t9/2/ I have been experimenting with ways to achieve some effects: Animating a hidden DIV to slide into view from below a visible container Centering text/image on a link to trigger the animation HTML <div clas ...

Troubleshooting a problem with CSS Matrix animations

Lately, I've been working on creating some matrix animations. However, I noticed an unusual issue. The code below seems to function differently across Firefox, Safari, and Chrome: @-moz-keyframes matrix { from { -moz-transform: matri ...

Reactjs: Material-ui's server-side rendering causes performance delays

After integrating material-ui (v0.14.4) into the mern starter boilerplate and passing the useragent through muiTheme (as demonstrated here), I noticed a significant delay in rendering all material-ui components. While no errors are being displayed in the c ...

What is the solution to prevent background-attachment:fixed; from distorting the image?

Looking to create a scrolling background image that doesn't stretch? Typically, using background-attachment: fixed; works, but it's causing the image to stretch and lose positioning capabilities. If you want to see the issue in action, check out ...