How to turn off pinch to zoom feature in Mozilla Firefox on a Microsoft tablet or touch screen display

My goal is to enable zooming and panning for an SVG across all devices and browsers. I've successfully implemented this using panzoom.js.

However, I'm encountering an issue specifically with Mozilla Firefox on tablet devices and Windows touch screen monitors. When attempting to pinch and zoom the SVG, it seems to trigger the browser's zoom feature rather than my custom functionality.

I've taken several steps to address this issue:

<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, user-scalable=0">

I've also tried utilizing the following property which proved effective in IE 11 and Microsoft Edge:

touch-action:none;

Unfortunately, none of these solutions are working in Mozilla Firefox. My ultimate goal is to prevent the default browser zoom action when pinching so that my custom functionality can take precedence.

Any help or insights would be greatly appreciated!

javascriptjqueryhtmlcssmozilla

Answer №1

give this a shot:

<add this meta tag to ensure proper scaling on mobile devices:>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0, user-scalable=no, minimal-ui, minimum-scale=1.0, maximum-scale=1.0">

Answer №2

To deactivate it, you'll need to access the computer's settings.

settings / control panel -> mouse -> device setting -> pinch to zoom -> untick the box

This is the sole method available; HTML or JavaScript won't work in this case.

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

Guide on accessing a nested array within a JSON object using JavaScript

I'm currently faced with a json object that contains nested arrays and names with spaces like Account ID. My goal is to only display the Account ID's within my Vue.js application. While I can access the entire response.data json object, I'm ...

javascriptjsonvue.jsaxios

"Enhance your PHP-MySQL data tables by implementing the Datatable Server Processing script using ssp.class.php

My goal is to build a data grid using the Datatables jQuery plugin and handle server-side processing with the provided ssp.class.php. While it initially worked, I encountered an issue when trying to retrieve data from multiple tables. To solve this, I util ...

phpjquerymysqldatatablesssp

Is there a way to reset back to the default CSS styles?

I have a div container with a nested span element (simplified). <div class="divDash"> <span>XX</span> </div> The CSS styling for the div makes the span initially hidden and only visible when hovering over the parent div. .div ...

javascriptjqueryhtmlcss

What purpose does the additional symbol "$()" serve in the selector "$($())"?

Currently, I am looking to incorporate a jQuery scrollspy feature into one of my ongoing projects. Upon coming across this jsfiddle (https://jsfiddle.net/mekwall/up4nu/), I successfully integrated it into my project. However, I have hit a roadblock while ...

javascriptjqueryhtml

Issue with verifying file existence utilizing $.ajax()

I'm currently facing a challenge checking for the existence of a file using $.ajax(). I am cycling through a JSON file with $.each and trying to determine if a specific staff member has an image. If not, I want to default to using the no_photo.jpg ima ...

javascriptjqueryjson

Combining ExtJS Paging with Dropdown Selection

Having an issue with a combo box created using the ExtJS framework. The pagination feature is not working correctly. Can anyone provide assistance with this? var store = new Ext.data.ArrayStore({ fields: ['id'], pageSize:1, data : ...

javascriptextjscombobox

The styles within a media query are not being successfully implemented

update: issue resolved. I discovered that there was a lingering media query in the css file that was meant to be removed. Also, I corrected some errors in the code. Thank you all for your help – it's now working perfectly. I have a set of html and ...

htmlcssmedia-queries

Optimizing Bootstrap Carousel Size

How can I create a carousel using Bootstrap without it taking up the entire window and hiding other div elements? Any suggestions on how to fix this issue would be greatly appreciated. I found this example during my research, but I'm still struggling ...

htmlcarouselbootstrap-5

Is there a method in JavaScript/jQuery to gently push or flick the scroll so that it can be easily interrupted by the user? Further details are provided below

I am looking for a solution in javascript that will allow the page to automatically scroll down slightly, but I also want the user to be able to interrupt this scroll. When using jquery for auto-scrolling, if the user begins manual scrolling while the ani ...

javascriptjqueryscrolluser-experience

When utilizing *NgIf, the button will be shown without the accompanying text being displayed

When trying to display either a confirm or cancel button based on a boolean set in my component.ts, I implemented the following code in my HTML: <mat-dialog-actions class="dialog-actions"> <button class="cancel-btn" ...

javascripthtmlcssangulartypescript

Choosing the following choice using the Material-UI Select tool

Looking for a way to enhance my dropdown select from MUI in a Nextjs application by adding two arrows for navigating to the next/previous option. Here's what my code currently looks like: <StyledFormControl> <Select value={cu ...

javascriptreactjsmaterial-ui

Submit the form only when the specified conditions are met, otherwise return

Is there a way to submit a form after it has been prevented from submitting? I've searched for solutions on StackOverflow but haven't found one that works for me. Below is the code snippet in question: $(function(){ $("#loginform").submit(f ...

javascriptphpjqueryajaxforms

Creating a popup window using HTML

I am attempting to create a pop-up window using HTML, but I'm struggling to get it to appear in the desired way. My goal is this: to have a pop-up show up when the profile image is clicked on. Here's the HTML <span class="profile"><im ...

jqueryhtmlcss

Map on leaflet with popup next to key

I am facing a scenario where I have a map with a unique legend that is styled either as an SVG or a PNG. The legend is always positioned in the bottom left corner but can be quite large, as users have the option to toggle it on and off. Additionally, the ...

javascriptwebleafletgis

Making AJAX requests with Laravel using the XMLHttpRequest object is a

When using Laravel to upload a file and create a progress bar with ajax requests, the form action routes to the controller in this way: <form action="{{ URL::route('upload-file-form-post') }}" method="POST" enctype="multipart/form-data"> ...

javascriptphpajaxlaravel

Ensure that Colorbox remains centrally positioned even while scrolling

I have noticed a difference in behavior between thickbox and colorbox when it comes to scrolling. Thickbox always stays centered on the screen even when the user scrolls vertically, while colorbox fades out and leaves just a grayed background. Is there a w ...

javascriptcsscolorbox

Extract specific elements from a webpage when conducting web scraping

Attempting to extract a table from a website using python, I successfully retrieved all the content within the table. However, being new to web scraping, I am unsure how to filter out only the elements I need. I have identified that I need to locate this ...

pythonhtmlseleniumweb-scraping

What could be causing my Node.js website to have trouble locating pages in the public directory?

Embarking on my journey in web development using node.js, I encountered an issue while trying to load a particular page, which led to the following error message in my browser: Cannot GET /public/pages/terms-and-conditions.html The file structure is orga ...

javascripthtmlnode.jsexpressweb

Displaying a List of Files Uploaded with Jquery File Upload in an ASP.NET MVC Application

I have successfully installed the NuGet Jquery File Upload Plugin. The uploader functions flawlessly, allowing me to easily drag and drop files for upload to my server. However, there are two issues that are hindering the completion of this project: Aft ...

jqueryjsonfile-uploadjquery-file-upload

How can I eliminate the CSS value that was inherited?

Looking for a way to eliminate the effect of an inherited CSS property with Jquery. .class1 #id1 div.class2 input.class-input{ border-color: #bbb3b9 #c7c1c6 #c7c1c6; } Can someone explain how to delete this "border-color"? Thanks. ...

javascriptjqueryhtmlcss