मैं अपनी खुद की पेशेवर वेबसाइट बनाने के लिए रिएक्ट का उपयोग कर रहा हूं। इसके साथ, मुझे एक अच्छा बैकग्राउंड चाहिए था जिसमें मैंने https://www का उपयोग करने का निर्णय लिया। npmjs.com/package/react-particles-js

मेरे पास एकमात्र मुद्दा यह है कि मोबाइल पर कण स्क्रीन को नहीं भरते हैं, बल्कि स्क्रीन के शीर्ष पर अटके हुए लगते हैं। इसे देखने का सबसे आसान तरीका https://my-app-bwp36ovux.vercel.app पर जाना है। / और साइट को अपने मॉनीटर पर देखें और फिर F12 डिबग कंसोल का उपयोग करके इसे मोबाइल डिवाइस में बदलें। ऐसा करते समय बैकग्राउंड में तैरते कणों पर ध्यान दें।

मुझे यह कास्ट मिला है जिसका उपयोग मैं कणों के लिए मान निर्धारित करने के लिए करता हूं

const particalOpt = {
  particles:{
    number:{
      value: 150,
      density: {
        enable: true,
        value_area: 800
      }
    },
    line_linked:{
      distance: 100,
      opacity: .2,
      width: 2,
    },
    move:{
      speed: 1,
      bounce: true,
    }
  }
}

मैं इसे केवल का उपयोग करके कॉल करता हूं

<div className="background">
            <Particles 
            params = {particalOpt}
            />
          </div>

मैं अपनी उंगली नहीं डाल सकता कि पृष्ठभूमि विशेषता का उपयोग करके ये कण मोबाइल उपकरणों को क्यों नहीं भरते हैं।

पूरे कोड के लिए https://github.com/13Smat/MySite पर जाएं।

पहले ही, आपका बहुत धन्यवाद।

1
Andy Silver 18 पद 2020, 01:49

3 जवाब

सबसे बढ़िया उत्तर

मुद्दा

बैकग्राउंड डिव में 100vw और 100vh होता है, लेकिन कैनवास की अपनी चौड़ाई और ऊंचाई होती है, जिसमें प्रत्येक को 100% ओवरराइड किया जाता है। समस्या यह है कि कैनवास को प्रस्तुत करने वाले div के पास कैनवास के उत्तराधिकारी या उसके सापेक्ष होने के लिए कोई पूर्ण आयाम नहीं है।

डोम

<div class="background">
  <div id="tsparticles"> // <-- no height/width for canvas to be % of
    <canvas
      class="tsparticles-canvas-el"
      width="558"
      height="281"
      style="width: 100%; height: 100%;" // <-- applied style
    ></canvas>
  </div>
</div>

कैनवास तत्व की लागू शैली:

element.style {
    width: 100%;
    height: 100%;
}

समाधान

#tsparticles div को चौड़ाई और ऊंचाई प्रदान करें। अपनी App.css फ़ाइल में निम्न CSS जोड़ें।

#tsparticles {
  width: 100%;
  height: 100%;
}

Edit why-does-my-react-site-resize-incorrectly

0
Drew Reese 18 पद 2020, 07:29

कृपया @ ड्रू रीज़ की टिप्पणी पर एक नज़र डालें और अपना प्रश्न संपादित करें।


इस बीच मैं एक उपयोगी उदाहरण प्रदान कर सकता हूं

यहां जो विशेषताएं आपकी सबसे अधिक सहायता करेंगी वे हैं background-size, < a href="https://www.w3schools.com/cssref/pr_background-position.asp" rel="nofollow noreferrer">background-position। आप ऐसी दूसरी बैकग्राउंड प्रॉपर्टी भी देख सकते हैं जो मदद कर सकती हैं

साइड नोट: प्रतिक्रिया विशेष रूप से नहीं बदलती है कि स्टाइल कैसे काम करता है, मैं सीएसएस के साथ खेलने की सलाह दूंगा - यह सीखने का सबसे अच्छा तरीका है

0
Ayushya 18 पद 2020, 02:29

यदि आप चाहते हैं कि कणों को पूर्ण स्क्रीन पृष्ठभूमि की तरह सेट किया जाए, तो मैं backgroundMode विकल्प का सुझाव दूंगा, आप अधिक यहां

आप उस विकल्प को इस तरह सेट कर सकते हैं:

{
    backgroundMode: {
        enable: true,
        zIndex: 0
    }
}

यदि आप zIndex गुण को ऋणात्मक मान पर सेट करते हैं, तो detectsOn गुण को ”window” में बदलना याद रखें यदि आपको माउस इंटरैक्शन की आवश्यकता है

0
Caelan 18 पद 2020, 09:21