पृष्ठभूमि-आकार की सीमाओं पर काबू पाना: मोबाइल सफारी में कवर

जब पृष्ठभूमि छवियों को लागू करने की बात आती है तो आईओएस डिवाइस एक अनूठी चुनौती पेश करते हैं पृष्ठभूमि-आकार: कवर का उपयोग करके संपूर्ण तत्वों को कवर करें। अपेक्षित व्यवहार के बावजूद, यह संपत्ति अक्सर इन प्लेटफार्मों पर अवांछनीय परिणाम देती है।

इस समस्या के समाधान के लिए, एक चतुर समाधान सामने आया है। विशेष रूप से iPhones को लक्षित करने वाली मीडिया क्वेरी के भीतर स्क्रॉल करने के लिए बैकग्राउंड-अटैचमेंट प्रॉपर्टी को समायोजित करके, समस्याग्रस्त व्यवहार को ठीक किया जा सकता है।

यहां दिए गए कोड का एक अद्यतन संस्करण है:

.section {
  margin: 0 auto;
  position: relative;
  padding: 0 0 320px 0;
  width: 100%;
}

#section1,
#section2,
#section3 {
  background-size: cover;
  background-attachment: fixed;
  background-position: center center;

  @media (max-width: @iphone-screen) {
    background-attachment: scroll;
  }
}

इस मीडिया क्वेरी को शामिल करके, बैकग्राउंड-अटैचमेंट प्रॉपर्टी को केवल पूर्वनिर्धारित @iphone-स्क्रीन वेरिएबल से कम या उसके बराबर चौड़ाई वाले डिवाइस के लिए स्क्रॉल करने के लिए सेट किया गया है। यह सुनिश्चित करता है कि पृष्ठभूमि छवियां बड़ी स्क्रीन पर अपनी निश्चित स्थिति बनाए रखते हुए iPhones पर अपेक्षित व्यवहार करती हैं।

यह समाधान इस सामान्य समस्या को संभालने का एक सरल और सुरुचिपूर्ण तरीका प्रदान करता है, जिससे आप निर्बाध पूर्ण-चौड़ाई वाली पृष्ठभूमि छवियां बना सकते हैं iOS सहित सभी उपकरणों पर।