आप आईफोन 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://...">
के बजाय) जो मेरे ऊपर है उससे।
संभावित डुप्लिकेट: http://stackoverflow.com/questions/3262432/ जहां ओपी कहता है कि जेएस से स्क्रीन आकार का पता लगाना संभव है। – mvds
http://stackoverflow.com/questions/3354246/javascript-iphone-selection/3354478#3354478 सहायता की शायद। –