मोबाइल उपकरणों के लिए रिज़ॉल्यूशन वास्तव में बड़ा है, केवल स्क्रीन का आकार छोटा है। उस पर आधारित:
जवाबों:
उत्तरदायी डिजाइन न तो स्क्रीन रिज़ॉल्यूशन और न ही स्क्रीन आकार पर आधारित है। इसके बजाय, उत्तरदायी डिजाइन सामग्री पर आधारित है और यह कैसे बनाया गया है जो इसे सभी आकारों और प्रस्तावों को फिट करने की अनुमति देता है।
जिस तरह से आप उत्तरदायी डिजाइन के बारे में सोच रहे हैं वह गलत है। मुझे लगता है कि आप एक अधिक पारंपरिक प्रिंट डिजाइन पृष्ठभूमि से आ रहे हैं, हाँ? वेब के लिए डिजाइनिंग बहुत अधिक मुक्त है। उत्तरदायी वेबसाइटों में अक्सर समान, पारंपरिक ब्रेकपॉइंट या विशिष्ट आकार / रिज़ॉल्यूशन नहीं होते हैं जो उनके लिए बने होते हैं क्योंकि वेब इससे अधिक की अनुमति देता है - यह सभी स्क्रीन आकारों तक पहुंचने की अनुमति देता है। इस तरह, आप जो भी उचित हो, उसके लिए जो भी डिजाइन कर रहे हैं, उसके लिए आप जो भी आकार सही है, का उपयोग करके डिजाइन कर सकते हैं।
कहा जा रहा है कि, सबसे अच्छा अभ्यास मोबाइल-पहले तरीके से डिजाइन करना है, जिसे वास्तव में मोबाइल-सबसे महत्वपूर्ण नाम दिया जाना चाहिए । यह आपको उस सामग्री पर ध्यान केंद्रित करने के लिए मजबूर करता है जो सबसे महत्वपूर्ण और संभव है और फिर आपको बड़ी स्क्रीन के लिए और अधिक जोड़ने की बजाय आपको बड़ी स्क्रीन पर अधिक से शुरू करने के लिए मजबूर करता है, फिर छोटे लोगों के लिए डिज़ाइन करते समय चीजों को हटा दें। आप इसके बारे में मेरे उत्तरदायी डिजाइन प्राइमर में अधिक पढ़ सकते हैं ।
लेकिन हमें उन तरीकों को भी डिजाइन करना होगा जो जवाबदेही के लिए अनुमति देते हैं। जिसका सबसे अच्छा अभ्यास एक जीवित उदाहरण है, चाहे प्रोटोटाइप रूप में या कुछ वायरफ्रेमिंग प्रोग्राम में, एक PSD जैसा स्थैतिक दस्तावेज नहीं। जब डेवलपर पक्ष की बात आती है, तो हमें उत्तरदायी इकाइयों का उपयोग करना चाहिए और हमारे कोड को इस तरह से संरचित करना चाहिए जो समझ में आए ।
इसके साथ ही कहा जा रहा है, आपको पिक्सल्स, अर्थ रिजॉल्यूशन, स्क्रीन साइज के हिसाब से चीजों को लगाना चाहिए।
बहुत बढ़िया सवाल!
यहाँ कुछ विचार थोड़े बहुत विरोधाभासों पर टिप्पणी कर रहे हैं जिनका हम आज सामना कर रहे हैं।
तकनीक वह नहीं है जो उम्र से होनी चाहिए।
हम सभी को वास्तविक जीवन इकाइयों (या अनुलंब आकार) के आधार पर डिजाइन करना चाहिए , जिसमें कुछ हद तक लचीलेपन और स्वतंत्रता के साथ उपयोगकर्ता को कुछ सशर्त समायोजन करने की अनुमति होती है।
लेकिन वास्तविक जीवन के माप को जानने के लिए हमें दोनों जानकारी की आवश्यकता होती है। फ़िसिकल आयाम और डिवाइस रिज़ॉल्यूशन = पिक्सेल घनत्व।
लेकिन यह बदल जाता है कि कुछ साल पहले, स्क्रीन डिवाइस पिक्सेल घनत्व घोषित करना शुरू कर रहे हैं। और कुछ इसे सर्वर के लिए घोषित नहीं करते हैं, बस इसके बारे में बहुत प्रचार करते हैं। (उर्फ इपाद, आईफोन)
डिस्प्ले रिज़ॉल्यूशन को ऑपरेटिंग सिस्टम द्वारा पता लगाया जा सकता है क्योंकि यह एक संकेत भेजने के लिए आवश्यक है तदनुसार, लेकिन स्क्रीन वास्तविक जीवन आकार के लिए हमें प्रत्येक मॉडल के विशाल डेटाबेस की आवश्यकता होती है। अच्छा नही।
यह हमें इस स्क्रीन रिज़ॉल्यूशन के साथ छोड़ देता है कि यह कुछ जानकारी है जिसे हम जान सकते हैं।
लेकिन यह मोबिल डिवाइस पर एक ही रिज़ॉल्यूशन की तुलना में एक बड़े फुलएचडी मॉनिटर के लिए डिज़ाइन करने के लिए पूरी तरह से अलग है। दोनों 1920x1080। आउच।
एक विशेष मामला यह है कि प्रोजेक्टर पर, becouse हम प्रोजेक्टिंग दूरी और दर्शकों की दूरी का कोई सुराग नहीं है।
एक आंशिक समाधान मीडिया प्रश्न और वेक्टर तत्व आदि हैं।
वेबडिजाइन के लिए: कम से कम जब तक हम कुछ बेहतर नहीं पाते हैं।
द्रव डिजाइन (प्रतिशत) और प्राकृतिक प्रवाह, अच्छी तरह से परिभाषित अनुभाग।
1920 चौड़ी
1280 पर मीडिया क्वेरी के साथ
और / या 1024 पर
शायद 720 पर
और 480।
उपकरण के साथ सशर्त समर्थन के लिए पता लगाने।
मोबाइल देशी ऐप्स के लिए
जैसा कि यह बहुत ही विशिष्ट है, बस यूआई और आइकनों के बारे में ब्रांड की gidelines का पालन करें।
संपादित।
क्यों एक FullHD मोबाइल डिवाइस पर एक छोटे स्क्रीन रिज़ॉल्यूशन का चयन?
एक स्मार्टफोन में फुलएचडी का वास्तविक रिज़ॉल्यूशन होता है, लेकिन आम तौर पर यह सर्वर और ब्राउज़र के लिए एक छोटा रिज़ॉल्यूशन घोषित करता है। आप इस googling https://www.google.com/search?q=what+is+my+screen+resolution का परीक्षण कर सकते हैं ताकि मीडिया क्वेरीज़ काम कर सकें।
सबसे पहले, उत्तर और कीमती दिशानिर्देशों के लिए आप सभी को धन्यवाद, यह निश्चित रूप से मदद करता है!
मुझे अपना निष्कर्ष जोड़ने की अनुमति दें:
व्यावहारिक रूप से, मोबाइल स्क्रीन रिज़ॉल्यूशन को लक्षित करना एक अच्छा यूएक्स नहीं है, छोटे स्क्रीन के लिए रिज़ॉल्यूशन बहुत अधिक है, फोंट पढ़ने के लिए बहुत छोटा होगा, आइकन क्लिक करने के लिए बहुत छोटा होगा, आदि।
इसलिए, वास्तविक व्यूपोर्ट आकार के आधार पर डिजाइन बनाना बेहतर है! इस तरह से यह इस पर आधारित है कि कोई उपयोगकर्ता क्या देख और महसूस कर सकता है।
वास्तविक जीवन में इसे प्राप्त करने के लिए, हमें <head>HTML दस्तावेजों के अंदर व्यूपोर्ट चौड़ाई मेटा टैग जोड़ना चाहिए :
<meta name="viewport" content="width=device-width, initial-scale=1.0">यह ब्राउजर को पेज को स्क्रीन की चौड़ाई के बराबर चौड़ाई के साथ रेंडर करने के लिए कहता है ताकि यह सुनिश्चित हो सके कि HTML पेज की चौड़ाई पिक्सल के संदर्भ में स्क्रीन की चौड़ाई के बराबर हो। तब विकास आसानी से विभिन्न मोबाइल व्यूपोर्ट आकार (जो एक दूसरे के करीब थोड़े होते हैं) को लक्षित करने वाले मीडिया प्रश्नों के साथ आसानी से योजना बनाई जा सकती है , और अधिक स्पष्ट रूप से स्पष्ट तत्व उत्पन्न करेंगे।
अगर मैं गलत हूं कृपया मुझे सही।
अपने विनम्र अनुभव के आधार पर मैं बेहतर उत्तरदायी वेबसाइट विकास के लिए नीचे दिए गए चरणों का सुझाव देता हूं:
1- व्यू-पोर्ट मेटा (देखें शीर्ष) का उपयोग करें, यह Google के अनुसार मोबाइल खोज परिणामों में वेबपेज की रैंकिंग को भी बढ़ावा देगा। http://googlewebmastercentral.blogspot.com/2015/04/faqs-april-21st-mobile-friendly.html
परीक्षण करने के बाद, ऐसा प्रतीत होता है कि व्यू-पोर्ट मेटा को जोड़ने से आपकी वेबसाइट को मोबाइल परीक्षण टूल https://developers.google.com/speed/pagespeed/insights/ में ग्रेड मिलेगा
2- आप मोबाइल-पहले दृष्टिकोण को लागू करने पर विचार करना चाह सकते हैं, हमेशा छोटे से बड़ा जाना आसान होता है (यह निर्भर करता है कि आपकी वेबसाइट कितनी जटिल है)
3- इसे पूरा करने के लिए एक हाइब्रिड रेस्पॉन्सिबल सिस्टम, एडाप्टिव (फ्लुइड) और रेस्पॉन्सिव (सीएसएस मीडिया-क्वेश्चन) के बीच मिश्रण लागू करें:
चौड़ाई और क्षैतिज मार्जिन / पैडिंग के लिए प्रतिशत का उपयोग करें । (यदि आप चाहें तो वर्टिकल मार्जिन निश्चित पिक्सेल आकार में हो सकते हैं। स्क्रॉल करना कोई समस्या नहीं है)
फोंट के लिए एम का उपयोग करें , इस तरह जब आप मीडिया में बॉडी (या html) के फॉन्ट साइज को बदलते हैं, तो सभी सीएसएस तत्व उस साइज के अनुकूल हो जाएंगे, px का उपयोग करने से यह एक बुरा सपना बन जाएगा क्योंकि आपको प्रत्येक सीएसएस क्लास के लिए जाना होगा और इसका फ़ॉन्ट आकार बदलें।
फ्लोट डिव के बाईं ओर ताकि वे उपलब्ध स्थान के लिए सही ढंग से संरेखित करें (या यदि आपके डिजाइन की आवश्यकता है तो सही)।
4- ब्रेक पॉइंट को परिभाषित करें , उसके लिए एक उत्तरदायी परीक्षण उपकरण का उपयोग करें। मैं फ़ायरफ़ॉक्स उत्तरदायी डिज़ाइन दृश्य का उपयोग करता हूं, बस चौड़ाई को संकीर्ण करें जब तक कि आप उस बिंदु तक न पहुंच जाएं जहां वेबसाइट दोषपूर्ण हो जाती है (जैसे 500px), यह एक ब्रेक पॉइंट मार्क है।
उस विराम बिंदु (500 पीएक्स) के लिए मीडिया क्वेरी के अंदर नए सीएसएस नियम लागू करें ,
5- वेबसाइट की गुणवत्ता और स्पष्टता को बनाए रखना याद रखें! यदि तत्व अस्पष्ट हो जाते हैं और एक-दूसरे के बहुत करीब हो जाते हैं, तो कंटेनर की चौड़ाई पर कब्जा करने के लिए तत्वों की चौड़ाई का विस्तार करें और उन्हें लंबवत रूप से स्टैक करें;
और शरीर के लिए एक नया फ़ॉन्ट-आकार देना याद रखें ताकि सभी उप-तत्व एक बड़ा फ़ॉन्ट प्राप्त करें और अधिक पठनीय बनें।
6- उत्तरदायी परीक्षण को दोहराएं और अपने दूसरे ब्रेक पॉइंट को परिभाषित करें, सबसे अधिक संभावना है कि आपको कई ब्रेक पॉइंट नहीं मिलेंगे क्योंकि हम यहां द्रव डिजाइन का उपयोग कर रहे हैं और यह वह जगह है जहां प्रतिशत का उपयोग कर वापस आ जाएगा!
मैंने पहले भारी डिजाइन तत्वों के साथ एक बड़ी वेबसाइट पर काम किया और इसके लिए केवल 2 मीडिया क्वेरी की आवश्यकता थी :)
आशा है कि मदद मिलेगी
वर्चुअल पिक्सेल (वास्तविक पिक्सेल नहीं ) में व्यूपोर्ट (स्क्रीन नहीं) के आयामों के आधार पर एक रिस्पॉन्सिव पेज रिफ़्लो कैसे होता है ।
एक पारंपरिक डेस्कटॉप पर जहां 1 वर्चुअल पिक्सेल = 1 वास्तविक पिक्सेल, यदि आपका ब्राउज़र चौड़ाई में 1000px पर सेट है, तो वह पृष्ठ उसे फिट करने के लिए वापस कर देगा।
एक iPhone 6 पर, जहां 1 वर्चुअल पिक्सेल (Apple इन बिंदुओं को कॉल करता है ) = 3 वास्तविक पिक्सेल, ब्राउज़र की चौड़ाई स्क्रीन की चौड़ाई है और सामग्री 417px चौड़ाई (भले ही वह वास्तव में 1242 असली पिक्सेल हो) को फिट करने के लिए मना करेगी
तो यह थोड़ा अजीब है, उपरोक्त उदाहरणों के साथ, कम वास्तविक पिक्सल वाले डिवाइस को वास्तव में एक उत्तरदायी लेआउट में एक व्यापक व्यूपोर्ट के रूप में देखा जा सकता है ।