2010-08-09 14 views
6

मैं आईफ़ोन 4 उपयोगकर्ताओं के लिए उच्च रिज़ॉल्यूशन चित्र लोड करना चाहता हूं, लेकिन उपयोगकर्ताओं का पता लगाने का एकमात्र तरीका उपयोगकर्ता-एजेंट द्वारा है। लेकिन मैं इस धारणा के तहत हूं कि किसी भी आईओएस 4 फोन पर मोबाइलसाफरी का उपयोगकर्ता-एजेंट बोर्ड भर में समान है।क्या आईफोन 3 जी/एस विज़िटर को आईफोन 4 विज़िटर को समझने का कोई तरीका है?

आईफोन 4 का पता लगाने के लिए मैं क्या कर सकता हूं?

+0

संभावित डुप्लिकेट: http://stackoverflow.com/questions/3262432/ जहां ओपी कहता है कि जेएस से स्क्रीन आकार का पता लगाना संभव है। – mvds

+0

http://stackoverflow.com/questions/3354246/javascript-iphone-selection/3354478#3354478 सहायता की शायद। –

उत्तर

3

आप आईफोन 4 के डिवाइस-पिक्सेल अनुपात (कितने सीएसएस पिक्सेल भौतिक प्रदर्शन पिक्सेल के बराबर) का पता लगाने के लिए CSS3 मीडिया प्रश्नों का उपयोग कर सकते हैं। फिर, आप सामान्य लोगों की बजाय उच्च-रिज़ॉल्यूशन छवियों को लोड करने के लिए सीएसएस का उपयोग कर सकते हैं।

<link rel="stylesheet" type="text/css" href="high_res.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" /> 

media विशेषता केवल करने के लिए निर्दिष्ट करता है एक साथ उपकरणों के लिए इस स्टाइलशीट का उपयोग करें:

अपने वेब पेज पर <head> टैग में, बाहरी शैलीपत्रक कि केवल iPhone 4 उपयोगकर्ताओं के लिए लोड किया जाएगा संदर्भ में जोड़ना न्यूनतम डिवाइस-पिक्सेल राशन 2 (यानी आईफोन 4)। के बजाय सीएसएस background-image संपत्ति का उपयोग करके

#highres-if-possible { 
    background-image: url(high_res_pic.png); 
} 

नोट आप होगा कि HTML में छवि को निर्दिष्ट करने के बाद, आपको high_res.css में सीएसएस नियम जोड़ सकते हैं कम-रिज़ॉल्यूशन छवियों उच्च रिज़ॉल्यूशन संस्करणों के साथ बदलने के लिए src विशेषता।

उदाहरण: एक 60x50 छवि के लिए, की जगह:

<img id="highres-if-possible" src="low_res_pic.png"> 

साथ

<img id="highres-if-possible" style="width: 60px; height: 50px; background-image: url(low_res_pic.png);"> 

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

CSS3 के मीडिया के प्रश्नों के बारे में अधिक जानकारी के लिए और उन्हें प्रयोग iPhone 4 पता लगाने के लिए, देखें: http://blog.iwalt.com/2010/06/targeting-the-iphone-4-retina-display-with-css3-media-queries.html

अद्यतन: मैं this post और this post में आए छवियों को निर्दिष्ट को संभालने के लिए एक बेहतर तरीका हो सकता है सीएसएस का उपयोग करके (का उपयोग <img src="http://..."> के बजाय) जो मेरे ऊपर है उससे।

-1

HTTP_USER_AGENT स्ट्रिंग का उपयोग करके आप शायद यह पता लगा सकते हैं कि यह कौन सा है। मैंने कभी कोशिश नहीं की है लेकिन अगर आपको शुरू करना चाहिए। इसके अलावा कुछ पीएचपी लाइब्रेरी देखी गई जो आपके लिए यह करेगी। उम्मीद है की यह मदद करेगा। चीयर्स।

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