Can you make this code so that on mobile I can't accidentally zoom in or out of the webpage and I can't horizontally or vertically scroll? svgGrid.js:
`document.addEventListener('DOMContentLoaded', function () {
    const svg = document.getElementById('infiniteGridSVG');
    const gridGroup = document.getElementById('grid');

    let panX = 0;
    let panY = 0;
    let scale = 1;
    let isPanning = false;
    let startX = 0;
    let startY = 0;

    const gridSize = 50;

    // Create the infinite grid
    function drawGrid() {
        gridGroup.innerHTML = ''; // Clear any previous grid

        const width = svg.clientWidth;
        const height = svg.clientHeight;

        // Draw vertical lines
        for (let x = -width; x < width * 2; x += gridSize) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', x);
            line.setAttribute('y1', -height * 2);
            line.setAttribute('x2', x);
            line.setAttribute('y2', height * 2);
            line.setAttribute('stroke', '#ccc');
            line.setAttribute('stroke-width', '1');
            gridGroup.appendChild(line);
        }

        // Draw horizontal lines
        for (let y = -height; y < height * 2; y += gridSize) {
            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
            line.setAttribute('x1', -width * 2);
            line.setAttribute('y1', y);
            line.setAttribute('x2', width * 2);
            line.setAttribute('y2', y);
            line.setAttribute('stroke', '#ccc');
            line.setAttribute('stroke-width', '1');
            gridGroup.appendChild(line);
        }
    }

    // Handle panning with mouse
    svg.addEventListener('mousedown', function (e) {
        isPanning = true;
        startX = e.clientX - panX;
        startY = e.clientY - panY;
    });

    svg.addEventListener('mousemove', function (e) {
        if (!isPanning) return;
        panX = e.clientX - startX;
        panY = e.clientY - startY;
        updateTransform();
    });

    svg.addEventListener('mouseup', function () {
        isPanning = false;
    });

    svg.addEventListener('mouseleave', function () {
        isPanning = false;
    });

    // Handle touch-based panning
    svg.addEventListener('touchstart', function (e) {
        if (e.touches.length === 1) {
            isPanning = true;
            startX = e.touches[0].clientX - panX;
            startY = e.touches[0].clientY - panY;
        }
    });

    svg.addEventListener('touchmove', function (e) {
        if (e.touches.length === 1) {
            panX = e.touches[0].clientX - startX;
            panY = e.touches[0].clientY - startY;
            updateTransform();
        }
    });

    svg.addEventListener('touchend', function () {
        isPanning = false;
    });

    // Handle zooming (with scroll wheel)
    svg.addEventListener('wheel', function (e) {
        e.preventDefault();
        const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
        scale *= zoomFactor;
        updateTransform();
    });

    // Apply transformations to the grid
    function updateTransform() {
        gridGroup.setAttribute('transform', `translate(${panX}, ${panY}) scale(${scale})`);
    }

    window.addEventListener('resize', drawGrid);
    drawGrid();
});
`
svgCanvas.html
`{% extends "base.html" %}

{% block title %}Family Tree{% endblock %}

{% block content %}
    <div id="svgContainer" style="width: 100vw; height: 100vh; overflow: hidden;">
        <svg id="infiniteGridSVG" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
            <g id="grid"></g>
        </svg>
    </div>
    
    <script src="{{ url_for('static', filename='js/svg/svgGrid.js') }}"></script>
{% endblock %}
`