आईफोन

Question

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

समस्या

एक केंद्रित पृष्ठभूमि छवि के साथ कुछ thats बहुत लंबा:

#content_container 
{ 

background-image:url('content-background.jpg'); 
background-position:top center; 
background-repeat:no-repeat; 
width:1020px; 
height:auto; 
} 

content-background.jpg छवि बहुत लंबा है (3000 पिक्सल) और डिज़ाइन किया गया है DIV उस में है 'के रूप में पता चला' सामग्री के कारण बढ़ता है।

आप पृष्ठ और समझने के लिए पूर्ण सीएसएस को देखने के लिए होगा, इसलिए मैं डिजाइन से बाहर सब कुछ छीन लिया गया है और इस उदाहरण के साथ समस्या फिर से उत्पादन: (उदाहरण के

http://files.codeulike.com/static/cssexample/example.htm
बनाया 1 html फ़ाइल, 1 सीएसएस फ़ाइल और 3 चित्र) के ऊपर

आपको लगता है कि IE8, फ़ायरफ़ॉक्स, क्रोम में आप एक अच्छे हरे बॉक्स मिल जाएगा देखेंगे। लेकिन एक आईओएस ब्राउज़र में लंबी पतली पृष्ठभूमि छवि फिर से स्केल हो जाती है और सबकुछ अजीब हो जाता है।

(मैं एक आइपॉड टच 2 पीढ़ी का उपयोग कर रहा हूँ, लेकिन मुझे लगता है एक ही समस्या क्या होगा अन्य आईफ़ोन में/आइपॉड स्पर्श करता है)।

किसी भी मदद की बहुत सराहना की!

Answer 1

यह पता चल: iPhone Jpegs के लिए एक मेगापिक्सेल सीमा, जिसके बाद यह Jpeg सिकुड़ता है।

वहाँ defusion.org.uk पर इस बारे में एक बहुत अच्छा ब्लॉग पोस्ट है: http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/

सीमा जिसके बाद Jpegs मिल सिकुड़ लगभग 2 मेगापिक्सल हो रहा है। यह एक आईओएस संसाधन सीमा दस्तावेज और यहाँ वर्णित है:

Apple - Creating Compatible Web Content - Know iOS Resource Limits

अधिकतम जेपीईजी के लिए छवि का आकार डीकोड 32 सबसैम्पलिंग का उपयोग कर मेगापिक्सल है।

जेपीईजी छवियों को 32 मेगापिक्सल के सबसैम्पलिंग, जो जेपीईजी छवियों को एक आकार पिक्सेल की संख्या सोलहवीं एक है कि करने के लिए डिकोड करने के लिए अनुमति देता है की वजह से हो सकता है। 2 मेगापिक्सेल से बड़े जेपीईजी छवियों subsampled हैं- यानी, कम आकार के लिए डीकोड किया गया है। जेपीईजी सबैम्पलिंग उपयोगकर्ता को नवीनतम डिजिटल कैमरों से छवियों को देखने की अनुमति देता है।

.. जो मेरा मतलब है कि Jpegs 2 के अंतर्गत मेगापिक्सल सामान्य रूप से प्रदर्शित किए जाते हैं ले, 2 और 32 मेगापिक्सल के बीच Jpegs (सिकुड़) subsampling द्वारा प्रदर्शित किए जाते हैं, और 32 मेगापिक्सल शायद अधिक Jpegs बिल्कुल प्रदर्शित नहीं किया जा सकता है।

अपनी साइट बदलने पृष्ठभूमि चित्र के 2 मेगापिक्सल के तहत किया गया उपयोग करने के लिए समस्या का समाधान।

Answer 2

नहीं पूरी तरह सच है, मैं एक पृष्ठभूमि 1640x1200 (उप 2Mpix) है और पृष्ठभूमि यहाँ सिकुड़ता है ...: एस

Answer 3

मैं इस के आसपास पाने के लिए सफारी CSS3 के कई पृष्ठभूमि छवियों का इस्तेमाल किया, सिर्फ 4 छवियों 500px लंबा बना दिया है और एक दूसरे को

Answer 4

मुझे पता है इस पोस्ट के दो वर्ष के रूप में मैं यह लिख है की चोटी पर उन्हें तैनात है, लेकिन मैंने कुछ ऐसा करने की कोशिश की जो संभवतः काम करने का सबसे अच्छा तरीका नहीं था, लेकिन यह मेरी समस्या का समाधान कर रहा था।

पहला कदम मेरी पृष्ठभूमि छवि को एक .png के रूप में सहेजना था जिसने समस्या को पूरी तरह ठीक किया ... 1200px x 12000px पृष्ठभूमि छवि को छोड़कर, .png फ़ाइल एक राक्षस था।

तो, मैंने फ़ोटोशॉप में .png फ़ाइल खोली और इसे वेब और उपकरणों के लिए .jpg के रूप में अनुकूलित किया और उस फ़ाइल को अपलोड किया और यह आईफोन और सभी बड़े 5 ब्राउज़रों पर एक आकर्षण की तरह काम किया।

आशा है कि मदद करता है!

Answer 5

आप डेस्कटॉप सीएसएस फ़ाइल में

background-attachment: fixed; 

रखा है, तो यह मोबाइल सीएसएस फ़ाइल में

background-attachment: scroll; 

लिए इसे बदलने के लिए याद है। यदि ऐसा नहीं किया जाता है तो यह अप्रत्याशित प्रभाव दिखाएगा।