सबसे आम मॉनिटर आकार। मोबाइल उपकरणों के बारे में डिजाइनर को क्या जानना चाहिए

तकनीकी पत्रकार अब पीसी के युग के बारे में चिल्लाते हुए पहले वर्ष नहीं हैं, पारंपरिक रूप के कारकों के कंप्यूटरों की बिक्री अपरिहार्य रूप से गिर रही है, जैसा कि उनके निर्माताओं के स्टॉक हैं। लेकिन मोबाइल उपकरणों, स्मार्टफोन या टैबलेट की संख्या में लगातार वृद्धि हो रही है।

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

डिज़ाइनरों ने मुझे जो रेक याद दिलाया है, उसे याद करते हुए, पहली चीज़ जो उनके द्वारा तैयार किए गए लेआउट के साथ समस्या का कारण बनती है, वह सटीक विचारों की कमी है कि कितने पिक्सेल स्क्रीन पर फिट होंगे, जो कि डेस्कटॉप 20 'मॉनीटर की तुलना में अधिक है। ठीक है, यह ठीक है, यह बड़ी संख्या में विपणन की गणना की गई थी। यह लेख स्थिति को समझने में मदद करेगा।

हम एंड्रॉइड और आईओएस पर उपकरणों के बारे में बात कर रहे हैं, जबकि WP अभी भी विदेशी है, और व्यक्तिगत अनुभव के बिना, मैं सिफारिशें देने का उपक्रम नहीं करूंगा।

यदि HTML दस्तावेज़ में कोई मेटा टैग नहीं हैं जो मोबाइल ब्राउज़र को दस्तावेज़ को प्रदर्शित करने के बारे में कुछ बताते हैं, तो ब्राउज़र ऐसा व्यवहार करेंगे जैसे दस्तावेज़ 980 पिक्सेल चौड़ा था। यह 320 पिक्सल की स्क्रीन चौड़ाई वाले फोन के लिए सच है, और एंड्रॉइड और आईओएस का उपयोग करने वाले 10 इंच के टैबलेट और वेबकिट पर एक ब्राउज़र के लिए। यह दृष्टिकोण बताता है कि सामग्री की आसान धारणा के लिए 960 पिक्सेल की न्यूनतम चौड़ाई वाले साइटों को छोटे क्षेत्र प्राप्त होंगे।

यदि दस्तावेज़ की न्यूनतम चौड़ाई बड़ी है, तो ब्राउज़रों का व्यवहार भिन्न होने लगता है। ज्यादातर मामलों में iPhone / iPad पर सफारी बस सामग्री को संपीड़ित करेगा। डीआईपी खुद को एंड्रॉइड - घनत्व-स्वतंत्र पिक्सेल में दिखाएगा, जिसके बारे में और बाद में। यदि दस्तावेज़ की चौड़ाई 980 से अधिक है और डीआईपी में डिवाइस की चौड़ाई से अधिक है, तो यह सही स्क्रॉल करेगा। इस प्रकार, 1040 पिक्सेल की सामग्री की चौड़ाई वाली एक साइट को iPhone और iPad (1024 पिक्सेल) पर क्षैतिज स्क्रॉल किए बिना प्रदर्शित किया जाएगा, लेकिन गैलेक्सी S3 (शारीरिक संकल्प 1280x720) या नेक्सस 7 टैबलेट (भौतिक संकल्प 1280x800) जैसे फोन पर स्क्रॉल करना।

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

साइटों के एक जोड़े के उदाहरण पर विचार करें।

इस तथ्य के बावजूद कि टेप.ru का बहुत ही सभ्य मोबाइल संस्करण है, इसके लिए स्वचालित संक्रमण नहीं किया जाता है। डेस्कटॉप में फिक्स्ड-मेनू स्वचालित स्केलिंग के साथ पाठ पर चढ़ता है। इससे पहले कि उपयोगकर्ता को अपने हाथों से स्केल करने के लिए एक विकल्प मिल जाए, या मी को निर्धारित करने के लिए बहुत आलसी न हो। in url

आरबीसी। सामान्य तौर पर, उनके पास एक मोबाइल संस्करण भी होता है, लेकिन इसके लिए संक्रमण केवल मुख्य पृष्ठ से किया जाता है। एक सीधा लिंक (Google समाचार से, विशेष रूप से) इस अपठनीय कैनवास को देखा जा सकता है। क्या कोई आगंतुक ऐसी साइट पर रहेगा? शायद ही।

सुपरकैनिकल पॉपअप आरबीसी-शैली पर चला गया। कैसे करना है का एक उत्कृष्ट उदाहरण आवश्यक नहीं है।

Intan, कौन सा संस्करण कौन अनुमान लगाता है। बेशक, मुझे पूरी तरह से समझ में आया कि मेनू से ऐसा करना गलत क्यों था, लेकिन किसी तरह बहस करने का मूड नहीं था। एक प्रश्न पूछें विषय में नहीं है।

एक और चीज जो आमतौर पर डेस्कटॉप पर बिताए गए समय को सही नहीं ठहराती है और मोबाइल में समस्याओं का कारण बनती है वह है कस्टम फॉर्म एलिमेंट्स। यह तथ्य कि वे सीएसएस माध्यमों द्वारा लगभग विन्यास योग्य नहीं हैं, केवल इसलिए नहीं कि विश्वव्यापी वेब कंसोर्टियम आलसी था।

उदाहरण के लिए, आपने एक सुंदर ड्रॉप-डाउन सूची तैयार की है। उदाहरण के लिए, डेस्कटॉप ब्राउज़र में यह सब कुछ जैसा दिखता है, यह एक माउस क्लिक से खुलता है और इसके पहिया के साथ स्क्रॉल करता है। लेकिन ऐसे तत्वों के साथ मोबाइल काम में आप बड़ी समस्याओं का कारण बनेंगे। यदि चयन मानक थे, तो उपयोगकर्ता को ओएस के आधार पर ड्रम / ड्रॉप-डाउन सूची के साथ एक सिस्टम विंडो दिखाई जाएगी।

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

बेशक, आदर्श रूप से, एक मोबाइल डिवाइस को परिभाषित किया जाना चाहिए, और मोबाइल उपकरणों के लिए, मानक इंटरफ़ेस को बदलने के उद्देश्य से लिपियों को निष्पादित नहीं किया जाना चाहिए।

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

मोबाइल उपकरणों के आकार और संकल्प। भौतिक स्क्रीन रिज़ॉल्यूशन और मोबाइल ब्राउज़र में रिज़ॉल्यूशन के बीच अंतर

IPhone और iPad बिंदुओं की धारणा का उपयोग करते हैं - सेब के अंक। 5 मॉडल तक का आईफोन रेजोल्यूशन - 320 गुणा 480 पिक्सल। रेटिना डिस्प्ले क्या है? रेटिना डिस्प्ले दोहरे पिक्सेल घनत्व का उपयोग करता है, अर्थात, प्रति डॉट 4 भौतिक पिक्सेल हैं। तो, iPhone 4 में 960 पिक्सल का 640 का भौतिक डिस्प्ले रिज़ॉल्यूशन है, फिर भी 320 में 480 पिक्सेल है। लेकिन एक ही समय में अनुप्रयोगों में दो बार बड़ी छवियों के उपयोग के कारण ग्राफिक्स अधिक विस्तृत हैं। IPhone 5 के लिए, अंकों में मूल्य 480 से बढ़कर 568 हो गया। iPad के लिए, मिनी सहित सभी संस्करण, यह हमेशा 1024x768 है।

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

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

स्क्रीन का घनत्व 1 है। इस श्रेणी में कई डिवाइस शामिल हैं, जैसे 320x480 फोन (एचटीसी हीरो, एलजी ऑप्टिमस वन), 7-इंच टैबलेट 1024x600 (सैमसंग गैलेक्सी टैब, किंडल फायर), 10-इंच टैबलेट (एसस ट्रांसफॉर्मर, एसर ए 500) गैलेक्सी टैब 10'1)।

1.33 की स्क्रीन घनत्व नेक्सस 7 की तरह 7-इंच की टैबलेट में उपयोग किया जाता है। शारीरिक संकल्प 1280x800 है, डीआईपी में यह 960x600 है।

स्क्रीन घनत्व 1.5 है - 2011 के उच्च मूल्य वाले मोबाइल फोन और 2012 का औसत, फुलएचडी के साथ 10 इंच की गोलियां। उदाहरण के लिए, नेक्सस वन 480x800 पिक्सल, 360x533 * डीआईपी, एचटीसी वन एस - 540x960 पिक्सल, 360x640 डीआईपी और असूस ट्रांसफॉर्मर पैड इन्फिनिटी 1920x1200 पिक्सल, 1280x800 डीआईपी।

* एंड्रॉइड डेवलपर्स पर, यह 534 पाया जाता है, लेकिन जेएस के माध्यम से ब्राउज़र की चौड़ाई का माप क्रमशः 533 दिखाता है, और मीडिया प्रश्नों में यह इस आंकड़े पर ध्यान देने योग्य है।

स्क्रीन 2 का घनत्व - 2012 की उच्च मूल्य श्रेणी के फोन और शाब्दिक रूप से कुछ टैबलेट। उदाहरण के लिए, एचटीसी वन एक्स, सैमसंग गैलेक्सी एस 3 - स्क्रीन रिज़ॉल्यूशन 1280x720 है, डीआईपी 360x640 में आयाम। Google टैबलेट नेक्सस 10 - 2560x1600 पिक्सल रिज़ॉल्यूशन, 1280x800 डीआईपी।

स्क्रीन घनत्व 3 - फुलएचडी डिस्प्ले के साथ 2013 के फ्लैगशिप। 1920x1080 पिक्सल के संकल्प के साथ, उनके पास अभी भी वही 360x640 डीआईपी है।

इस सब के लिए, 2x (384x640) के घनत्व के साथ 1280x768 पिक्सल की स्क्रीन के साथ अभी भी एक विचलित Google Nexus 4 है। ऑन-स्क्रीन कुंजियों वाले मॉडल में 42 डीआईपी उनके लिए पैनल लेता है, इसलिए पोर्ट्रेट मोड में इस तरह के (गैलेक्सी नेक्सस, नेक्सस 4, सोनी एक्सपीरिया जेड) के मॉडल में पोर्ट्रेट रिज़ॉल्यूशन थोड़ा कम होगा और 598 पिक्सल होगा।

इस प्रकार, हमारे पास चित्र के लिए तीन संकल्प हैं - 320, 460 और एक दुर्लभ 384, और चार के साथ आधा परिदृश्य संकल्प - 480, 533, 568, 640 (नरम कुंजी के साथ 598)।

टैबलेट में 600 और 800, और परिदृश्य 960, 1024 और 1280 हैं।

नीचे दी गई तालिका लोकप्रिय उत्पादों के लिए सबसे आम अनुमतियों को सूचीबद्ध करती है:

मोबाइल ऐप लेआउट पर काम कैसे शुरू करें?

शुरुआत के लिए, दिशानिर्देश पढ़ें। विभिन्न प्लेटफार्मों के लिए आवेदन अलग दिखना चाहिए। उदाहरण के लिए, लिंक का अनुसरण करके आप विभिन्न ऑपरेटिंग सिस्टम के विशिष्ट तत्वों की तुलना कर सकते हैं।

IPhone एप्लिकेशन लेआउट पर काम करने के लिए, 640x1136 (960) कैनवास बनाएं और उन आयामों का उपयोग करें जो दो में से कई हैं। सभी ग्राफिक्स, सभी फोंट ऐसे होने चाहिए।

सिग्नल संकेतक, बैटरी, आदि के साथ एक स्थिति पट्टी आपके भविष्य के अनुप्रयोग में स्क्रीन के एक निश्चित हिस्से पर कब्जा कर सकती है। ये आईओएस में 20 और एंड्रॉइड में 25 डीआईपी हैं। सॉफ्ट-कीज़ वाले एंड्रॉइड फोन में और स्क्रीन के निचले हिस्से में 48 DIP टैबलेट्स के लिए, यह उनके लिए मर जाता है (नेविगेशन बार)। उसी समय, सैमसंग टैबलेट जैसे गैर-विहित उपकरणों में, मूल शेल के उपयोग के कारण, नेविगेशन बार और स्टेटस बार संयुक्त होते हैं।

एंड्रॉइड फोन के लिए एक आवेदन के लिए, कम से कम 720x1280 होस्ट करना महत्वपूर्ण है। आधुनिक झंडे के आधार पर, यह केवल 1080x1960 तक बेहतर है।

720x1280 के एक कैनवास के लिए, आयाम भी दो के एक से अधिक होना चाहिए, 1080x1960 के लिए, तीन का एक बहु। एक कैनवास के रूप में 480x800 या 640x960 का उपयोग करना एक बहुत बुरा विचार है।

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

अनुपयोगी आकार के एक लेआउट का उपयोग करना, आवेदन की उपस्थिति या इसके इच्छित ग्राफिक्स के लिए दोष पूरी तरह से आप पर होगा।

सामान्य तौर पर, विवरण के लिए चौकस रहें और याद रखें - पिक्सेल और बिंदु / डिपी एक ही बात नहीं हैं।

उच्च घनत्व स्क्रीन के लिए वेब ग्राफिक्स का अनुकूलन करें

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

उसी समय, एसवीजी के लिए समर्थन अभी भी बहुत सीमित है, और पुराने ब्राउज़रों के साथ पिछड़े संगतता के लिए आपको अभी भी एक रेखापुंज का उपयोग करना होगा। एक और सिरदर्द स्प्राइट्स का उपयोग होगा - पृष्ठभूमि-स्थिति मूल्यों को प्रतिशत में इंगित करने की आवश्यकता होगी, जिसके लिए बड़े गणितीय गणना की आवश्यकता होगी। कम से कम मुश्किल तरीका एक ही छवियों के कई प्रकारों का उपयोग करना है, मीडिया क्वेरी के माध्यम से, उदाहरण के लिए -webkit-min-device-pixel-ratio: 2।

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

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

अभिवादन, आकस्मिक आगंतुकों और ब्लॉग साइट के नियमित पाठक!

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

लेख की संक्षिप्त रूपरेखा:

पिछले लेख में मैंने पहले ही उसके बारे में लिखा था, और इसकी आवश्यकता क्यों है। लेकिन यह बहुत अनुकूलन क्षमता कैसे प्राप्त करें?

इसके लिए अलग-अलग तरीके हैं। कोई जावास्क्रिप्ट का उपयोग करता है, तो कोई अन्य। लेकिन मुझे लगता है कि सबसे आसान और सही तरीका सीएसएस के साथ अनुकूल है।

कैसे उत्तरदायी वेबसाइट लेआउट बनाने के लिए

सबसे पहले,   यदि आप टैग के बीच एक उत्तरदायी वेबसाइट डिजाइन के साथ आते हैं   निम्नलिखित कोड चिपकाएँ:

मैं क्या मूर्ख था कि मैंने यह सही नहीं किया जब मैंने साइट का एक अनुकूली लेआउट बनाने की कोशिश की !!!
  उनके स्केलिंग साइट लेआउट में मोबाइल ब्राउज़र की समस्या, यहां तक ​​कि अनुकूली भी।

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

ऐसा कैसे? मैंने सभी शैलियों को फिर से जांचना शुरू कर दिया, अगर मैंने कक्षाओं को सही ढंग से पंजीकृत किया, तो मुझे अंत में यह मिला कि जावास्क्रिप्ट के माध्यम से मैंने पीएक्स में ब्राउज़र विंडो की चौड़ाई की जांच की। मैं चौंक गया। लैपटॉप पर जांच करते समय, मुझे 1024px का परिणाम मिला, और उसी परिणाम के बारे में मुझे स्मार्टफोन पर साइट खोलकर मिला!

लेकिन यह नहीं हो सकता है!

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

अपनी मूर्खता और अक्षमता के कारण, मैंने बहुत समय गंवा दिया। लेकिन अब मुझे हमेशा याद रहता है)))।

अनुकूली लेआउट CSS मीडिया अनुरोध

  CSS के साथ इसे उत्तरदायी बनाने के लिए, आपको मीडिया प्रश्नों का उपयोग करने की आवश्यकता है।

ऐसा क्या है? हाँ, बहुत सरल है। CSS फ़ाइल में आपको अनुरोधों को पंजीकृत करने की आवश्यकता है:

   @मीडिया स्क्रीन और (न्यूनतम-चौड़ाई: 1440px) और (अधिकतम-चौड़ाई: 1599px) ()

इस कोड का अर्थ है कि "()" के बीच संलग्न शैलियाँ 1440px की न्यूनतम चौड़ाई और अधिकतम 1599px स्क्रीन के साथ काम करेंगी।

यही है, साइट के तत्वों की उन शैलियों को जिन्हें स्क्रीन रिज़ॉल्यूशन के आधार पर अनुकूलित करने की आवश्यकता है, प्रत्येक संभावित स्क्रीन चौड़ाई के लिए अलग से वर्तनी की जानी चाहिए।

अनुकूली लेआउट जब सबसे महत्वपूर्ण स्क्रीन रिज़ॉल्यूशन

• 320 px   - मोबाइल डिवाइस (पोर्ट्रेट ओरिएंटेशन);
• 480 px   - मोबाइल डिवाइस (लैंडस्केप ओरिएंटेशन);
• 600 पीएक्स   - छोटी गोलियां;
• 768 पीएक्स   - गोलियाँ (चित्र अभिविन्यास);
• 1024 पीएक्स   - गोलियाँ (परिदृश्य अभिविन्यास) / नेटबुक;
• 1280 पीएक्स और अधिक   - पीसी।

यह इन अनुमतियों पर है कि जोर दिया जाना चाहिए और अनुकूली लेआउट में उन पर विशेष ध्यान दिया जाना चाहिए। ये सबसे आम प्रकार के स्क्रीन रिज़ॉल्यूशन हैं।

बूटस्ट्रैप उत्तरदायी डिजाइन

  एक अनुकूली लेआउट बूटस्ट्रैप बनाने के लिए उपयोग करना बहुत सुविधाजनक है। सुविधा यह है कि ब्लॉक, बटन, टेबल आदि को अपनाने के लिए सभी शैलियों। बूटस्टैप में पहले से ही वर्तनी है। आपको बस यह पता लगाना है कि किस तत्व को किस वर्ग को असाइन करना है।

आरंभ करने के लिए, बूटस्ट्रैप का नवीनतम संस्करण डाउनलोड करें और इसे अपनी साइट से कनेक्ट करें। कृपया ध्यान दें कि स्टाइल और स्क्रिप्ट को वर्डप्रेस से जोड़ने की अपनी विशेषताएं हैं।

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

उदाहरण के लिए, यह डिज़ाइन आपको सामग्री के लिए 8 भागों की चौड़ाई के साथ एक विस्तृत ब्लॉक का चयन करने की अनुमति देगा और स्क्रीन के 4 भागों की चौड़ाई के साथ साइडबार के लिए एक संकीर्ण एक:

स्क्रीन की चौड़ाई के आधार पर ब्लॉकों की चौड़ाई की गणना स्वचालित रूप से की जाएगी। और जब एक मोबाइल डिवाइस पर देखा जाता है, तो ये ब्लॉक एक दूसरे के नीचे चले जाएंगे।

आप ब्लॉक के इंडेंट को किनारे से, फिर से, वांछित संख्या में भागों में भी समायोजित कर सकते हैं। उदाहरण के लिए, यह डिज़ाइन:

स्क्रीन के 1 भाग में एक इंडेंट के साथ 10 भागों की चौड़ाई वाला एक ब्लॉक बनाया जाएगा।

यदि आप इसका पता लगाते हैं, तो बूटस्ट्रैप के साथ काम करना बहुत तेजी से काम करता है। ये शैलियों वास्तव में सही ढंग से क्या काम करती हैं और साइट पर कुछ भी टेढ़ा नहीं होगा।

भविष्य में मैं बूटस्ट्रैप के साथ काम करने के बारे में कुछ सबक देना चाहता हूं। इसलिए, मैं आपको सलाह देता हूं कि इस क्षण को याद न करें।

साइट अनुकूलन जांच

  लेकिन सवाल उठता है: साइट की अनुकूलन क्षमता की जांच कैसे करें? यहां आपने CSS, हुक बूटस्ट्रैप में मीडिया अनुरोधों को निर्धारित किया है और आवश्यक कक्षाओं का उपयोग किया है। और आप कैसे जांचते हैं कि साइट सभी स्क्रीन रिज़ॉल्यूशन पर सही ढंग से एडैप करती है?

बहुत सटीक और सबसे महत्वपूर्ण बात यह है कि वेबमास्टर्स और वेब डिज़ाइनर जो साइटों के अनुकूली लेआउट में लगे हुए हैं, सम्मान और धन्यवाद के पात्र हैं।

आपको आर्टिकल कैसा लगा? क्या सब कुछ स्पष्ट है? यदि नहीं, तो टिप्पणियों में लिखें, हम एक साथ समझेंगे।

हाँ, एक उत्तरदायी वेबसाइट डिज़ाइन बनाने के लिए, आपको कड़ी मेहनत करने की आवश्यकता है। लेकिन इन कार्यों को आपकी साइट के खोज इंजनों के अनुकूल रवैये और आपकी साइट के सबसे महत्वपूर्ण आगंतुकों को पुरस्कृत किया जाएगा।

प्रत्येक स्मार्टफोन का मुख्य पैरामीटर स्क्रीन रिज़ॉल्यूशन है। आइए देखें कि यह क्या है और यह इतना महत्वपूर्ण क्यों है।

स्क्रीन रिज़ॉल्यूशन क्या है?

डिस्प्ले रिज़ॉल्यूशन एक मूल्य है जो लंबाई और चौड़ाई में डिस्प्ले पर पिक्सेल की संख्या को इंगित करता है। यह पैरामीटर महत्वपूर्ण है क्योंकि यह प्रत्येक स्मार्टफोन की छवि की स्पष्टता निर्धारित करता है।

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

वर्तमान में, 99 प्रतिशत स्मार्टफोन तीन प्रकार की स्क्रीन के साथ आते हैं।

• एचडी (1280x 720, 720p);
• पूर्ण HD (1920 × 1080, 1080p);
• क्वाड एचडी (2560 × 1440, 1440 पी)।

किस स्क्रीन रिज़ॉल्यूशन को चुनना है?

स्मार्टफोन के सबसे लोकप्रिय स्क्रीन रिज़ॉल्यूशन में से एक 1280 पिक्सल 720 एचडी है। बजट मूल्य खंड के लगभग सभी गैजेट्स ऐसे ही एक संकेतक से लैस हैं।

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

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