2012-05-23 10 views
10

मुझे उच्च घनत्व स्क्रीन वाले नए फोन पर पिक्सेल आकार के बारे में मेरी समझ को स्पष्ट करने में मदद करने के लिए किसी की आवश्यकता है। चूंकि, यह मेरे वेब डिज़ाइन में एक वक्र बॉल फेंक रहा है।स्मार्ट फोन के लिए वेब डिज़ाइन - पिक्सेल आकार

स्मार्टफोन के बारे में मेरे प्रारंभिक समझ है कि पिक्सेल आकार लगभग 480 x 320 था, जो आसान डिजाइनिंग बनाया, क्योंकि पिक्सल अभी भी वही पिक्सल थे।

हालांकि, कुछ स्मार्ट फ़ोन इस से दोगुनी (या अधिक) हैं। मेरा मानना ​​है कि iPhone 960 x 640 मेरे गैलेक्सी नेक्सस पर सही मायने में डबल है 1280 x 720

अब है, यह सिर्फ ठीक काम करता है जब% के प्रयोग से। हालांकि, ऐसी कई चीजें हैं जिन्हें मैं फिक्स्ड पिक्सेल मानों का उपयोग करना चाहता हूं। उदाहरण के लिए, कई ऊंचाई मानों को% s में होने की आवश्यकता नहीं है। इसके अतिरिक्त, यदि ऊंचाई तय की गई है, तो कुछ आइटम, जैसे कि लोगो, आइकन, कुछ चित्र, चौड़ाई बढ़ने पर मैं बाहर नहीं बढ़ना चाहता हूं ... इसलिए इन्हें लगातार मूल्य की आवश्यकता होगी।

हालांकि, जब मैं पिक्सेल वास्तव में एक सतत शारीरिक माप नहीं करता हूं, तो मैं इसे कैसे संभाल सकता हूं?

यह आसान जब एक उदाहरण का उपयोग करते हुए, तो अगर कोई मुझे लेने के लिए यह समझा सकता है, एक उदाहरण के रूप प्रतीक का कहना है।

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

इन आइकनों पर माप क्या होगा? एक के लिए, मुझे पता है कि मानक आइकन आमतौर पर 16x16 होता है। तो, क्या इन उच्च घनत्व वाले स्मार्ट फोन पर 32x32 होने की आवश्यकता होगी? हालांकि, वे मेरे डेस्कटॉप पर देखे गए 16x16 आइकनों के समान आकार के समान प्रतीत नहीं होते हैं। वे शायद 12x12 अधिक दिखने लगते हैं। तो, सुनिश्चित नहीं है, लेकिन मुझे लगता है कि स्मार्टफोन के लिए डेस्कटॉप के लिए एक अलग "मानक" आइकन आकार है (यह क्या होगा?)।

वैसे भी, मेरे पास पहले से ही सीएसएस की पहचान है कि मेरे मोबाइल लेआउट को प्राप्त करने के लिए एक मोबाइल फोन का उपयोग किया जा रहा है। हालांकि, क्या मुझे पिक्सेल घनत्व को पहचानने के लिए एक कदम आगे जाना चाहिए और फिर मेरे निश्चित मूल्यों को समायोजित करना चाहिए, इस मामले में, डबल? या कोई और बेहतर तरीका है?

किसी भी और सभी मदद की सराहना की जाती है। मैं थोड़ी सी स्टंप हूं और वहां पर वास्तव में बहुत सारी जानकारी नहीं है। धन्यवाद और लंबी पोस्ट के लिए खेद है!

+0

ध्वनि मुद्दे की तरह पिक्सेल अनुपात है। रेटिना डिस्प्ले में 2: 1 पिक्सेल अनुपात होता है (रेटिना पर एक पिक्सेल नियमित प्रदर्शन पर 2 जैसा ही होता है)। इससे संकल्प ऐसा प्रतीत होता है कि आप जो अपेक्षा करते हैं वह दोगुना है। इस विषय पर बहुत सी चल रही चर्चा है, और मुझे यकीन है कि आप कुछ खोजों को थोड़ा खोज के साथ पा सकते हैं। –

+0

यहां एक लेख है जो आपको कुछ और जानकारी दे सकता है (वहां बहुत सारे हैं) http://menacingcloud.com/?c=highPixelDensityDisplays –

उत्तर

6

डिवाइस के लिए पिक्सेल घनत्व की सूची: http://www.binvisions.com/articles/tablet-smartphone-resolutions-screen-size-list/ आपकी समस्या शायद अनुपात में परिवर्तन है।

यहाँ एक अच्छा है जो मैं व्यक्तिगत रूप से

http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

संदर्भित करने के लिए समाप्त करने के लिए छोड़ा जा रहा है की तरह कुछ संवेदनशील अनुसंधान को कवर लेख है, उदाहरण के लिए iPhone 4 रेटिना प्रदर्शन पिक्सेल घनत्व डबल है और यहाँ यह लक्षित कर की उपरोक्त लेख से एक उदाहरण (परीक्षण नहीं किया है) http://thomasmaier.me/blog/2010/06/23/css-for-iphone-4-retina-display/

और एक अन्य लेख 2 छवियाँ बनाने के लिए होने के बारे में जानकारी का एक सा देने के विभिन्न ppi साथ http://bjango.com/articles/designingforretina/

मैं व्यक्तिगत रूप से डिजाइन सीएसएस का उपयोग कर के लेआउट के लिए ट्विटर की बूटस्ट्रैप & इसके उत्तरदायी प्लगइन का उपयोग: http://twitter.github.com/bootstrap/scaffolding.html#responsive

+0

धन्यवाद! वे कुछ सबसे उपयोगी लिंक थे जिन्हें मैं पूछ सकता था। – jstacks

+2

विकिपीडिया लेख हटा दिया गया है। पिक्सेल आयाम वाले उपकरणों की एक और सूची यहां दी गई है: http://www.binvisions.com/articles/tablet-smartphone-resolutions- स्क्रीन- आकार-list/ – steel

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