我的网站在桌面上部署得很好，但只在较小的设备上呈现背景颜色。我该如何解决？

Question

我创建了一个投资组合网站并将其部署在 Netlify 上。

这是 GitHub 仓库：https://github.com/AnukratiMehta/portfolio-website.git

这里是Netlify地址：https://anukratimehta.netlify.app

该网站在桌面上呈现完美，但在较小的设备上一直给我带来麻烦。我在使用 GitHub 页面进行部署时也遇到了同样的问题，所以我知道问题出在网站上，而不是托管服务上。

测试后，我意识到问题出在我的万花筒组件上。当我将其从网站上完全注释掉并推送更改时，网站会在移动设备上按预期打开。我想了解如何修复该组件，以便能够在较小的设备上使用它呈现网站。

import React, { useRef, useEffect, useState } from 'react';
import p5 from 'p5';

function Kaleidoscope() {
  let canvasRef = useRef(null);
  let sketchCreated = false;

  useEffect(() => {
    if (!sketchCreated) {
      new p5(sketch, canvasRef.current);
      sketchCreated = true;
    }
  }, []);

  const [p5Instance, setP5Instance] = useState(null);
  const [color, setColor] = useState("#57cbff");

  function handleReset() {
    if (p5Instance) {
      p5Instance.clear();
    }
  }


  function handlePink() {
    setColor("#f57dff");
    p5Instance.stroke("#f57dff");
  }

  function handleBlue() {
    setColor("#57cbff");
    p5Instance.stroke("#57cbff");
  }

  function handleYellow() {
    setColor("#e8ff64");
    p5Instance.stroke("#e8ff64");
  }

  function sketch(p) {
    let symmetry;
    let angle;

    p.setup = function () {
      if (!sketchCreated) {
        new p5(sketch, canvasRef.current);
        sketchCreated = true;
      }

      symmetry = 6;
      angle = 360 / symmetry;
      p.createCanvas(350, 350);
      p.angleMode(p.DEGREES);
      p.stroke(color);

      setP5Instance(p);
    };


    p.draw = function () {
      p.translate(p.width / 2, p.height / 2);

      if (p.mouseX > 0 && p.mouseX < p.width && p.mouseY > 0 && p.mouseY < p.height) {
        let mx = p.mouseX - p.width / 2;
        let my = p.mouseY - p.height / 2;
        let pmx = p.pmouseX - p.width / 2;
        let pmy = p.pmouseY - p.height / 2;

        if (p.mouseIsPressed) {
          for (let i = 0; i < symmetry; i++) {
            p.rotate(angle);
            p.line(mx, my, pmx, pmy);
            p.push();
            p.scale(1, -1);
            p.line(mx, my, pmx, pmy);
            p.pop();
          }
        }
      }
    };
  }

  return (
    <div className='flex flex-col'>
      <div className='my-5' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <h1 className='text-2xl text-center text-lightest-slate ml-5'>Draw on Me ↓</h1>
        <button onClick={handleReset} onTouchStart={handleReset} className="text-green border border-green rounded-md text-lg px-5 py-2.5 hover:text-green hover:bg-lightest-navy transition-all ease-in-out duration-200 cursor-pointer text-center mx-8">Reset</button>
      </div>
      <div className="kaleidoscope-container" style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <div ref={canvasRef} style={{ border: '3px solid rgba(73, 86, 112, 0.102)', borderRadius: '5px', padding: '5px' }} />
      </div>
      <div className='m-5' style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
        <button
          onClick={handleBlue}
          onTouchStart={handleBlue}
          className={`text-green border border-green rounded-md text-lg px-5 py-2.5 hover:text-green hover:bg-lightest-navy transition-all ease-in-out duration-200 cursor-pointer text-center mx-3 ${color === "#57cbff" ? "selected" : ""
            }`}
        >
          Blue
        </button>

        <button
          onClick={handleYellow}
          onTouchStart={handleYellow}
          className={`text-green border border-green rounded-md text-lg px-5 py-2.5 hover:text-green hover:bg-lightest-navy transition-all ease-in-out duration-200 cursor-pointer text-center mx-3 ${color === "#e8ff64" ? "selected" : ""
            }`}
        >
          Yellow
        </button>
        <button
          onClick={handlePink}
          onTouchStart={handlePink}
          className={`text-green border border-green rounded-md text-lg px-5 py-2.5 hover:text-green hover:bg-lightest-navy transition-all ease-in-out duration-200 cursor-pointer text-center mx-3 ${color === "#f57dff" ? "selected" : ""
            }`}
        >
          Pink
        </button>
      </div>
    </div>
  );

}

export default Kaleidoscope;

到目前为止，我已经尝试过：

• 使画布大小响应而不是 350*350
• 添加 onTouchStart 和 onClick
• 在较小的设备上隐藏组件

这些都不起作用。该网站在台式机上仍然运行良好，仅在手机和平板电脑上呈现背景。你能提供任何修复吗？如果您需要更多详细信息，请告诉我。 TIA！