पिक्सल में एक वेबसाइट के लिए मानक चौड़ाई क्या है?


23

पिक्सल में वेबसाइट के लिए मानक चौड़ाई क्या है या आँकड़े कहाँ हैं?


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

जवाबों:


23

कोई मानक नहीं है, अधिकांश डेवलपर्स 1024x768 को मानक मान लेते हैं।

एक CSS ग्रिड सिस्टम है जिसका नाम 960grid है जो शरीर की चौड़ाई को 960px के रूप में मानता है, फिर 96 कॉलम में 10px, या 80 को 12px के साथ तोड़ता है।

समस्या यह है: पीसी स्क्रीन हमेशा बड़े और बड़े होते जा रहे हैं, धीरे-धीरे कुछ क्षेत्रों में लेकिन।

दूसरी ओर, टेक-टॉप्स में, आपके पास मोबाइल डिवाइस और नेटबुक में छोटे स्क्रीन होते हैं।

इस वास्तविकता से निपटना दर्दनाक हो सकता है। बचाव के लिए सीएसएस मीडिया क्वेरी है। वैकल्पिक रूप से, आप मोबाइल डिवाइस को वैकल्पिक संस्करण प्रदान करने के लिए टैग लिंक (rel handheld के साथ) का उपयोग कर सकते हैं।

आपके लिए कुछ संदर्भ लिंक का पालन करें


17

पिक्सल में एक वेबसाइट के लिए मानक चौड़ाई क्या है?

कोई भी संख्या 0 से अधिक और अनंत से कम है।

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

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

उपयोग की जाने वाली कुछ सामान्य चौड़ाई सीमाएँ हैं:

  • अतिरिक्त छोटा : 0-480
  • छोटा : 480- 768
  • मध्यम : 768-1024
  • बड़ा : 1024-1200
  • अतिरिक्त बड़ा : 1200+

ये सीमाएँ इतनी सामान्य हैं कि मैं कहूँगा कि वे व्यावहारिक रूप से एक मानक हैं। सभी श्रेणियों का उपयोग करने की आवश्यकता नहीं है, उदाहरण के लिए किसी साइट पर नीचे की चौड़ाई 768 और फिर निश्चित चौड़ाई के लिए तरल चौड़ाई हो सकती है और 768+ के लिए केंद्रित हो सकती है।

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

आँकड़े कहाँ हैं?

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

यदि आपके आँकड़े ज्यादातर उपयोगकर्ताओं को मुख्य रूप से डिवाइस की चौड़ाई की एक विशेष श्रेणी का उपयोग करते हुए दिखाते हैं, तो आपको संभवतः उन उपयोगकर्ताओं की सेवा करने पर ध्यान देना चाहिए। उस सभी ने कहा, यदि आपका डिजाइन ठीक से उत्तरदायी है तो आपको किसी विशेष आकार पर ध्यान देने की आवश्यकता नहीं होगी।

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


पुराने, आउट-ऑफ-डेट प्री-आरडब्ल्यूडी संस्करण पोस्टीरिटीज खातिर

मुझे आश्चर्य है कि किसी और ने Google द्वारा ब्राउज़र आकार का उल्लेख करने के लिए नहीं सोचा है ।

मानकों के अनुसार:

दर्शकों का 80% 1000 पिक्सेल चौड़ाई को संभाल सकता है, लेकिन जो कि कर सकते हैं और अधिक से अधिक 1000 पिक्सेल चौड़ाई संभाल अक्सर नहीं है। चौड़ी स्क्रीन की निगरानी के साथ कई लोग अपनी खिड़कियों को आधी स्क्रीन पर संरेखित करेंगे। अब जब Win7 ड्रैग-एन-डॉक का समर्थन करता है, तो संभावना है कि यह और भी लोकप्रिय हो जाएगा।

ऊंचाई के लिए: उपयोगकर्ता के लिए आपका पहला इंप्रेशन पेज के शीर्ष पर लगभग ~ 600px तक होता है। हालांकि, अधिकांश उपयोगकर्ता जानते हैं और सामग्री को "गुना से नीचे" गिरने की उम्मीद करते हैं और तैयार हैं और स्क्रॉल करने में सक्षम हैं।

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

~ 960px एक मानकीकृत चौड़ाई है, लेकिन वास्तव में यह सामग्री और शैली पर निर्भर करता है।


1
अगर कोई दिलचस्पी रखता है, तो मेरे 1920x1200 रिज़ॉल्यूशन मॉनिटर पर Google Chrome को एक तरफ डॉक करने से 927px का उपयोग करने योग्य क्षेत्र (स्क्रॉल बार के लिए स्थान छोड़कर) हो जाता है।
मैटिस

लिंक अब काम नहीं करता है।
एल्फाले जुले

3

मैंने पिछले वर्ष Google Analytics का उपयोग करके यह जानने के लिए एक छोटा परीक्षण किया कि औसत आंतरिक ब्राउज़र चौड़ाई और ऊँचाई (उपयोगकर्ता वास्तव में क्या देखते हैं)।


बहुत बढ़िया पृष्ठ मार्टिन, मुझे आश्चर्य है कि मैंने इसके बारे में पहले नहीं सुना है :) ऊपर इस लोगों को वोट दें!
मैटिस

2

जैसा कि दूसरों ने कहा है, इस प्रकार की चीज का कोई मानक नहीं है। हालांकि, यहां कुछ सुझाव दिए गए हैं जो या तो आपकी वेबसाइट को बनाएंगे या ब्रेक देंगे:

मैंने हमेशा प्रतिशत या सबसे खराब स्थिति परिदृश्य का उपयोग किया है: छोटी स्क्रीन रिज़ॉल्यूशन जो आप आमतौर पर भर में आ रहे हैं वह 800x600 है, और यहां तक ​​कि दुर्लभ भी है। नीचे कुछ भी है जो शायद एक मोबाइल डिवाइस पर है। 775px चौड़ाई का उपयोग करने के लिए एक अच्छा माध्यम है, या बस 80% अगर आप एक तथ्य के लिए जानते हैं कि आपकी वेबसाइट पर अभी भी अपील होगी जब इसे बड़े स्क्रीन पर बढ़ाया जाता है। सबसे आम समस्या यह है कि पाठ सामग्री (जब 1600px चौड़ाई तक बढ़ा दी जाती है) खाली और छोटी लगती है। अपनी वेबसाइट को 775px चौड़ाई पर रखने से यह ठीक हो जाएगा, हालाँकि यह दोनों तरफ बड़े खुले स्थान के साथ अच्छा नहीं लग सकता है।

कभी भी अपने उपयोगकर्ताओं को बाईं या दाईं ओर स्क्रॉल न करें। संभावित ग्राहकों या पाठकों को खोने का सबसे तेज़ तरीका पक्षों की सामग्री को काटना है।

अपना नेविगेशन कहीं ऊपर या किसी ऐसी जगह पर रखें जहाँ उपयोगकर्ताओं को इसे खोजने के लिए स्क्रॉल करने की आवश्यकता न हो।

और सिर्फ एक सामग्री टिप; या तो उच्च ग्राफिक्स / कम जानकारी या उच्च जानकारी / कम ग्राफिक्स है। दोनों को मिलाने की कोशिश हमेशा भयानक लगती है।


1

मानक "जितना संभव हो उतना चौड़ाई / ऊंचाई" होगा। यह उपयोगकर्ताओं के स्क्रीन पर निर्भर करता है:

http://www.w3schools.com/browsers/browsers_display.asp


3
उस साइट से बचा जाना चाहिए ( w3fools.com ) और वे आँकड़े बेकार हैं (क्योंकि नमूना भारी तिरछा है)।
क्वेंटिन

1

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

जनवरी 2013 से।

  1. 1366x768 25.4%

  2. 1920x1080 11.0%

  3. 1280x1024 9.7%

  4. 1440x900 7.3%

  5. 1280x800 8.2%

  6. 1680x1050 5.7%

  7. 1600x900 5.0%

  8. 1920x1200 2.9%

  9. 1360x768 2.1%

  10. 2560x1440 1.1%

  11. अन्य 11.6%


1

Google Analytics विज़िटर के स्क्रीन रिज़ॉल्यूशन को रिकॉर्ड करता है। अपने आगंतुकों के सामान्य स्क्रीन आकार क्या हैं, यह जांचने के लिए आप आसानी से एक कस्टम रिपोर्ट बना सकते हैं । मई 2013 के लिए मेरी वेबसाइट के आँकड़े (शीर्ष 15) इस प्रकार हैं:

Rank     Resolution    % of Visits
----     ----------    -----------
   1     1366x768            23.0%
   2     1920x1080           17.7%
   3     1440x900             8.4%
   4     1280x1024            8.4%
   5     1680x1050            7.1%
   6     1280x800             6.9%
   7     1600x900             6.0%
   8     1920x1200            4.7%
   9     1024x768             4.4%
  10     2560x1440            2.3%
  11     1360x768             2.1%
  12     1280x768             1.0%
  13     1600x1200            0.7%
  14     1280x720             0.7%
  15     1152x864             0.5%

आँकड़ों के अनुसार साइट पर साइट से लेकर ट्रैफ़िक तक भिन्न-भिन्न होता है, इसलिए यह तदनुसार डिज़ाइन को प्राप्त करता है। मैं खुद प्रतिशत चौड़ाई, 1000px min-widthऔर एक उचित के साथ द्रव डिजाइन पसंद करते हैं max-width


0

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

संदर्भ के लिए मैं आमतौर पर न्यूनतम 1024x768 मान लेता हूं।

किसी भी मामले में यहां कुछ हैं: http://www.w3schools.com/browsers/browsers_display.asp http://www.w3counter.com/globalstats.php


0

मुझे लगता है, यह वेबसाइट की सामग्री पर निर्भर करता है।

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

तो, मुझे विश्वास नहीं है (और वेब लेआउट के आकारों के बारे में) फ्रेड को पसंद नहीं है।


0

960 पिक्सेल सबसे सुरक्षित है, क्योंकि यह एक 1024x768 स्क्रीन पर काम करता है और स्क्रॉलबार के लिए जगह छोड़ता है, और यह लैंडस्केप मोड में एक iPhone पर भी काम करता है (क्योंकि यह पिक्सेल अपने 480x320 स्क्रीन को प्रभावी 960x640 पर दोगुना करता है, और इसमें नहीं है। स्क्रॉल पट्टी)।


0

यह देखते हुए कि आज के अधिकांश वाइडस्क्रीन मॉनिटर में "1440x900" या व्यापक का रिज़ॉल्यूशन है, मुझे लगता है कि 1280-पिक्सेल चौड़ा "मानक" बन रहा है, खासकर जब यह छवियों को प्रदर्शित करने की बात आती है।

नोट: 1280-पिक्सेल चौड़ा कई पुराने 4: 3 अनुपात 17-इंच और 19-इंच स्क्रीन की चौड़ाई थी।


मैक और लैपटॉप के कारण अधिकांश स्क्रीन 'USED' नहीं बिके 1366x768px। मेरा जवाब देखिए।
साइमन हैटर

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

-1

960 पिक्सल साइटों के लिए सबसे अच्छी चौड़ाई है


क्या आपके पास कोई ज़रिया है?
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.