2012-01-28 8 views
16

कुछ अज्ञात कारणों से, आईपैड सफारी वास्तव में एक लंबी पृष्ठभूमि छवि प्रदर्शित नहीं करता है। my example में, पृष्ठभूमि छवि 1,000 x 10,000 पिक्सेल है। वही उदाहरण किसी भी डेस्कटॉप ब्राउज़र पर काम करता है उदा। सफारी, फ़ायरफ़ॉक्स, आदि(वास्तव में) लंबी पृष्ठभूमि छवि आईपैड सफारी पर प्रस्तुत नहीं होती

मुझे सीएसएस में background-repeat से अवगत है लेकिन दुर्भाग्य से यह मेरे विशिष्ट मामले में लागू नहीं है।

+0

क्या आप वर्णन कर सकते हैं कि पृष्ठभूमि-दोहराव: आपके लिए लागू नहीं है? या ऐसा इसलिए है क्योंकि जिस छवि को आप अपने उदाहरण यूआरएल के बाहर उपयोग करना चाहते हैं वह दोहराने योग्य नहीं है? – Luke

+0

सिद्धांत रूप में, उदाहरण निश्चित रूप से 'पृष्ठभूमि-दोहराव' का उपयोग कर सकते हैं। हालांकि, यह केवल यह दिखाने के लिए है कि जब आप इसे सफारी (आईपैड) पर देखते हैं तो पृष्ठभूमि छवि को प्रस्तुत नहीं किया जाता है। – moey

+0

pjumble यह सब बाहर sussed है :) – Luke

उत्तर

29

मोबाइल सफारी क्या आकार पृष्ठभूमि छवियों को यह सबसैम्पलिंग से पहले प्रदर्शित करेगा सीमा, आप अपनी पृष्ठभूमि के आकार की वजह से इस समस्या ने टक्कर मार दी हो रही हो सकती है:

डीकोड GIF के लिए अधिकतम आकार, PNG, और टीआईएफएफ छवियां 256 एमबी रैम से कम और 256 एमबी रैम से अधिक या बराबर वाले उपकरणों के लिए 5 मेगापिक्सेल वाले उपकरणों के लिए 3 मेगापिक्सेल है।

यह है कि 256 एमबी रैम से कम वाले उपकरणों के लिए चौड़ाई * ऊंचाई ≤ 3 * 1024 * 1024 सुनिश्चित करें। ध्यान दें कि डीकोडेड आकार किसी छवि के एन्कोडेड आकार से कहीं बड़ा है।

देखें: Know iOS Resource Limits

+0

नमूना पृष्ठ पर पृष्ठभूमि छवि <50 KB है। – moey

+4

यह फ़ाइल आकार के बारे में नहीं है, यह आयाम है: 1000 * 10000> 5 * 1024 * 1024 – pjumble

+0

उत्तर संपादित करने के लिए धन्यवाद। अब यह स्पष्ट है कि यह आयाम से संबंधित है; फ़ाइल का आकार नहीं। – moey

13

आप एक से अधिक पृष्ठभूमि छवियों का उपयोग करके इस लक्ष्य को हासिल कर सकते हैं। अपने लंबे जेपीजी को प्रबंधित करने योग्य हिस्सों में स्लाइस करें जो सीमा के अनुरूप हैं, और फिर उन्हें एक ही पृष्ठभूमि में मर्ज करने के लिए css3 जादू का उपयोग करें।

उदाहरण के लिए मैं 2048px टुकड़ों में एक 7400px उच्च छवि कटा हुआ है और उन्हें वापस इस के साथ साथ स्थिति: पूर्ण रिज़ॉल्यूशन पर आईपैड पर

background-image: url('../images/bg_ipad1.jpg'), url('../images/bg_ipad2.jpg'), url('../images/bg_ipad3.jpg'), url('../images/bg_ipad4.jpg'); 
background-position: center 0px, center 2048px, center 4096px, center 6144px; 
background-size: auto auto; 
background-repeat: no-repeat; 

यह भार।

+1

वाह पृष्ठभूमि, एकाधिक पृष्ठभूमि छवियों का उपयोग कर बहुत चालाक है। –

संबंधित मुद्दे