2009-01-15 5 views
25

मैं एक वेब एप्लिकेशन डिजाइन कर रहा हूं, और मैं सबसे बड़ा आकार (एक्स और वाई) जानना चाहता हूं जिसे मैं डिजाइन कर सकता हूं।1024x768 स्क्रीन पर सामान्य व्यूपोर्ट आकार क्या है?

As of January 2008, लगभग आधे उपयोगकर्ता 1024x278 स्क्रीन का उपयोग कर रहे हैं, और शायद 10% से कम छोटी स्क्रीन का उपयोग कर रहे हैं। (फोन और पाल्मटॉप उपयोगकर्ता यहां एक अपवाद हैं।) इसलिए हम 1024x768 के न्यूनतम स्क्रीन आकार के लिए डिज़ाइन कर रहे हैं।

हालांकि, कि स्क्रीन आकार है, और जब हम अपने सामग्री बिछाने रहे हैं हम व्यूपोर्ट आकार पता करने की जरूरत। There is evidence कि अधिकांश उपयोगकर्ताओं के पास ब्राउज़र अधिकतम है, लेकिन अभी भी एक को ओएस सजावट और ब्राउज़र क्रोम के लिए स्थान घटा देना चाहिए। लोग अपने क्रोम को कस्टमाइज़ करते हैं, इसलिए कोई भी "दाएं" उत्तर नहीं होता है; मैं एक उचित बाध्यता के लिए जा रहा हूं जो उपयोगकर्ताओं के बहुमत को समायोजित करेगा।

मैं plenty of designers जो कहते हैं कि वे 960 पिक्सेल की चौड़ाई, क्योंकि यह कई कारकों है और समान रूप से विभाजित किया जा सकता है का उपयोग करें - लेकिन इस पर निर्णय लेने से पहले मैं अधिकतम आकार है कि मैं दूर के साथ प्राप्त कर सकते हैं जानना चाहता हूँ , तो मैं कुछ हद तक कम उपयोग करना चुन सकता हूं। मैंने 960, 9 74 या 9 0 9 उद्धृत की अधिकतम चौड़ाई देखी है ... मेरे अपने प्रयोग 1000 कामों की चौड़ाई दिखाने के लिए ठीक लगते हैं।

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

तो मेरा असली सवाल यह है: मैं सबसे बड़ा व्यूपोर्ट आकार क्या कर सकता हूं और उम्मीद है कि यह सभी उपयोगकर्ताओं के 80-90% के लिए स्क्रॉलबार के बिना फिट हो सकता है?

उत्तर

31

आज मैं बस ऐसी साइट पर आया जो मेरे पुराने प्रश्न के लिए बेहद प्रासंगिक है। स्पष्ट रूप से Google ब्राउज़र विंडो आकारों के बारे में अपना ज्ञान साझा करने के लिए तैयार है। उनकी नई सेवा http://browsersize.googlelabs.com/ पर है और यह मूल रूप से आपको सामान्य ब्राउज़र पोर्टल आकारों पर अपना डेटा दिखाती है।

नोट: गूगल लैब्स browsersize बहुत अब पुराने हो चुके है और will be shut down soon (छवि 2009-11-18-day_google_com_100_donate_example.png शीर्षक है)। गूगल पता चलता है कि गूगल एनालिटिक्स अपनी खुद की साइट के लिए ब्राउज़र आकार के वितरण निर्धारित करने के लिए इस्तेमाल किया जा सकता: http://analytics.blogspot.ca/2012/06/new-feature-conduct-browser-size.html

+0

के लिए जाने के लिए अनिच्छुक बनाता है जब मैंने आपका प्रश्न देखा था .. लेकिन आपने पहले से ही इसका जवाब दिया है: पी –

+0

भयानक * बुकमार्क लिंक * – Earlz

+0

नीचे की रेखा (चूंकि Google ब्राउज़र को सूर्यास्त करने वाला है): यह ऐसा लगता है कि 9 0 पीएक्स सबसे व्यापक है जो आप 90% उपयोगकर्ताओं का समर्थन करते समय प्राप्त कर सकते हैं। 9 5% तक पहुंचने के लिए, आपको 825px तक नीचे जाना होगा। – Tom

7

सुनिश्चित करें कि आपकी साइट 800x600 पर प्रस्तुत करेगी, लेकिन इसे उपयोगकर्ता के आकार के अनुसार भरने के लिए विस्तारित करें।

1600x1200 पर सर्फिंग से कहीं ज्यादा परेशान नहीं है या केवल एक गूंगा साइट का सामना करने के लिए बड़ा है जो 700-800 पीएक्स चौड़ाई से आगे नहीं बढ़ेगा।

बाहर की जाँच करें कैसे पृष्ठ आकार परिवर्तन को संभालने के लिए एक महान उदाहरण के लिए नीले रंग में आदमी ... http://themaninblue.com/experiment/ResolutionLayout/

अद्यतन: मैं एक अच्छा साइट है कि कुछ आँकड़े इस्तेमाल किया उन का कितना% निर्धारित करने के लिए मिला देख सकते हैं कि कौन सा आकार स्क्रीन: http://www.methodologie.com/webcanvas/

+4

लेकिन मैं 800x600 के संकल्प का समर्थन करने में दिलचस्पी नहीं रखता हूं! (पुराने हार्डवेयर वाले लोग स्क्रॉलबार के साथ साइट देख सकते हैं।) जिन लोगों के पास 1024x768 की तुलना में लार्जर स्क्रीन है, मैं साइट को स्केल करने का एक तरीका प्रदान कर रहा हूं ... यह प्रश्न न्यूनतम आकार के बारे में है। – mcherm

+0

फिर न्यूनतम 1024x768 के लिए जाएं ... मैं उस से छोटा नहीं जाऊंगा यदि यह ओवरहेड प्रोजेक्टर सीमाओं के कारण एक एप्लिकेशन है जो अक्सर 1024x768 पर जमानत देता है। – scunliffe

+0

दोह, मेरा मतलब 1024x768 – scunliffe

0

आपके द्वारा पहले से मिले सभी उत्तर शायद सही हैं।

आकस्मिक उपयोगकर्ता (स्टीरियोटाइपिकल: विन XP या Vista, IE6-7, कोई कस्टम खाल नहीं) 1000px के करीब एक चौड़ाई संभवतः फिट होगी। अगर लोगों ने अपने ब्राउज़र को संशोधित किया है, उन्हें पूर्ण स्क्रीन नहीं चला रहे हैं या उनके ऑपरेटिंग सिस्टम पर कस्टम स्किन्स नहीं हैं, तो यह संख्या बदल सकती है।

यदि मैं 1024px-width-resolution के लिए डिज़ाइन करना चाहता था, तो शायद मैं 980 पीएक्स के करीब चौड़ाई चुनूंगा। यह सब आप पर निर्भर है, और कोई "एक और एकमात्र जवाब" नहीं है। लगभग पूरी तरह से चीजों के आधार पर, लगभग 960-1000 पीएक्स।

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

उस सबसे महत्वपूर्ण जानकारी के लिए, 550px या उससे अधिक की ऊंचाई वाले व्यूपोर्ट की अपेक्षा की जा सकती है।

तो, ~ 980px * ~ 550px शायद एक कम या ज्यादा मानक एक प्रारंभिक बिंदु के रूप में उपयोग करने के लिए :-)

5

क्या इसके लायक है के लिए व्यूपोर्ट है, साइडबार खुला का डिफ़ॉल्ट चौड़ाई के साथ XP IE7 उपयोगकर्ताओं पूर्ण पर स्क्रीन एक्सजीए 862 पीएक्स की व्यूपोर्ट चौड़ाई प्राप्त करें। ऊंचाइयों को इतना महत्वपूर्ण नहीं है क्योंकि हम लंबवत स्क्रॉल करने की उम्मीद करते हैं, लेकिन क्षैतिज रूप से स्क्रॉल करना भी मौत है।

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

(क्या है कि, stackoverflow? सच? चौंकाने वाली, tsk।)

+0

यह एक बहुत अच्छा मुद्दा है लेकिन मुझे उत्सुक बनाता है कि Vista चलाने वाले लोगों का प्रतिशत केवल 1024x768 पर है? निश्चित रूप से एक्सपी पर बहुत कुछ, लेकिन लैपटॉप पर विस्टा वाला कोई भी व्यक्ति 1280+ की संभावना है। मैं नए विस्टा मशीनों के बारे में निश्चित नहीं हूं जिनका उपयोग पुराने मॉनीटर के साथ किया जा रहा है। किसी को इस पर कोई आंकड़ा मिला है? –

+0

प्लस मुझे यकीन है कि वे अब तक एक लुभावनी अनुभव के लिए उपयोग किया जाता है। मुझे 974 –

1

मैं फ़ायरफ़ॉक्स 1024x1000 की (क्रोम सहित) एक आकार के साथ खोलने की है। मैं पूर्ण स्क्रीन ब्राउज़ नहीं करता हूं।

मेरे क्रोम में मेन्यू बार, नेविगेशन टूलबार (छोटे आइकन के साथ), बुकमार्क टूलबार, टैब बार, दाएं तरफ स्क्रॉल बार और नीचे स्थित स्टेटस बार शामिल है।

मेरा वास्तविक दृश्य पोर्ट बिल्कुल 1000x843 है।

3

मैं वर्तमान में 1024x600 स्क्रीन रिज़ॉल्यूशन पर एसर नेटबुक पर हूं। याद रखें कि हम एक बढ़ते बाजार खंड हैं! (या कम से कम, अपनी ऊर्ध्वाधर रीयल-एस्टेट को न्यूनतम स्क्रीन ऊंचाई के रूप में 768 मानने की कोशिश न करें)

1

मैं सोनी लैपटॉप WUXGA स्क्रीन (1920x1200) पर हूं। इसलिए ब्राउज़र क्रोम शून्य से मैं अभी भी एक बहुत इज्जत प्रयोग करने योग्य 1831 पिक्सल है

मैं स्क्रीन के बाईं ओर पर अपने कार्य पट्टी की है। आमतौर पर यह ज्यादातर उपयोगों के लिए अच्छा लगता है।

मैं सिर्फ अपनी चौड़ी स्क्रीन का पता लगाने के लिए स्टैक ओवरफ्लो वाउडल की इच्छा करता हूं और मुझे अपना उत्तर पूर्वावलोकन दाहिने हाथ कॉलम में दिखाता हूं।

0

960px चौड़ाई एक अच्छा आकार है क्योंकि यह बहुत विभाजित है। कई प्रणालियों के लिए 1000px बहुत बड़ा होगा। स्क्रॉलबार चौड़ाई प्लस फ़्रेमिंग Vista/फ़ायरफ़ॉक्स पर लगभग 33px तक जोड़ती है।

मुझे लगता है कि जाँच ऊंचाई उपयोगी है, क्योंकि यह एक दर्शक और नहीं देख सकते हैं कर सकते हैं क्या जब पहली बार एक पृष्ठ को खोलने की एक विचार प्राप्त करने के लिए अच्छा है। जानकारी संतृप्ति के इन दिनों में आप स्क्रॉल करने के लिए कभी भी आगंतुक पर भरोसा नहीं कर सकते हैं। जब 1024x768 करने के लिए सेट

Firefox पर मेरे व्यूपोर्ट, खुले टैब, त्वरित लिंक और उत्कृष्ट वेब डेवलपर उपकरण पट्टी विस्तार के साथ ही 572px है।

आप वेब डेवलपर उपकरण पट्टी का उपयोग करते हैं कई उपयोगी सुविधाओं में से एक तुरन्त जो कुछ भी आकार आप इसके लिए सेट करने के लिए ब्राउज़र का आकार बदलने की क्षमता है: उदाहरण के लिए। 1024x768, 800x600 इत्यादि। तो आप अपनी वेबसाइट को उसी तरह देख सकते हैं जैसे स्क्रीन स्क्रीन के विज़िटर इसे देख पाएंगे।

वेब डेवलपर अच्छी तरह से बाहर की जाँच के लायक है: https://addons.mozilla.org/en-US/firefox/addon/60

1

बस सोचा था कि मैं जोड़ना होगा शॉन Inman के Mint आँकड़े अनुप्रयोग एक plugin कि विंडो का आकार ट्रैक करता है, बल्कि स्क्रीन रिज़ॉल्यूशन से है, और खाते बुरी से बुरी हालत ब्राउज़र में ले जाता है क्रोम।इसके बाद परिणाम परिणामों को समूहित करते हैं क्योंकि आगंतुकों का x% विंडो चौड़ाई> वाई%, या> z% ऊंचाई है, जो किसी विशिष्ट साइट के बारे में सूचित निर्णय लेने के लिए बहुत उपयोगी हो सकता है, और प्रक्रिया के कुछ अनुमान कार्य को बाहर ले जाता है।

1

1007px निरपेक्ष अधिकतम आप क्षैतिज स्क्रॉलबार बिना इंटरनेट एक्सप्लोरर (details) में साथ काम करने के लिए मिलता है। लेकिन मैंने कहा कि मुझे लगता है कि आपको अधिकतम तक नहीं जाना चाहिए जब तक कि आपको इसकी आवश्यकता न हो। इसके बजाय, इस धारणा पर भरोसा करें कि कई लोगों के ब्राउज़र अधिकतम नहीं हैं।

Google का Browser Size एक शानदार टूल है।

7

उपयोगकर्ताओं का विशाल बहुमत 1024x 768 स्क्रीन पर अधिकतम विंडो में आईई 7 में वेब को देखता है और अपने ब्राउज़र को संशोधित नहीं करता है। तो मुझे एक गिनी पिग मिला और एक स्क्रीन शॉट लिया। मैंने माना कि टास्कबार एक पंक्ति थी और दृश्यमान - फिर से, डिफ़ॉल्ट व्यवहार - और 1003 x 589 का विंडो आकार मिला। मैं व्यक्तिगत रूप से 960 x 560 का एक लाइव क्षेत्र का उपयोग करता हूं।

1

मूल प्रश्न - के बावजूद यह एक अच्छा एक था! - साथ ही साथ कुछ उत्तर 2014 के अनुसार तेजी से बाहर हो रहे हैं।

अब हमें विभिन्न स्क्रीन आकारों, नेटबुक, आईमैक्स को विस्तृत स्क्रीन, रेटिना, (एंड्रॉइड/मैक) टैबलेट इत्यादि।

उसमें जोड़ें कि स्पर्श और टैप के बीच विभाजन बाद में एक दुर्लभ घटना नहीं हो रहा है।

अब हम device-specific style with a tap-based UI for handheld devices with fixed browser sizes और fluid-responsive style with mouse-hover effects etc. for desktop computers.

यह जरूरत आज चर्चा का ध्यान केंद्रित किया जाना चाहिए।

इस अर्थ में, उत्पत्ति का उत्तर। सवाल आसानी से नहीं दिया जा सकता है। एक बहुत ही सामान्य 1024x768 स्क्रीन आईपैड - या स्केल डाउन ब्राउजर विंडो बहुत अच्छी तरह से हो सकती है।

+1

मैं वास्तव में उत्सुक हूं कि "क्रोम" (यानी, एनएवी बटन/बार और विंडो मैनेजर बार + कोई सीमाएं और स्क्रॉलबार) के लिए कैसे खाते हैं। सभी प्रमुख ब्राउज़रों के लिए यह औसत देखना अच्छा लगेगा। – ylluminate

+0

संपादन के लिए धन्यवाद! की सराहना की! आप 'जोड़ा क्रोम' के बारे में सही हैं :) अच्छा होगा यदि सभी ब्राउज़रों ने स्क्रॉल बार * अंदर *, यानी एक अविभाज्य ओवरले के रूप में प्रदर्शित किया। विंडो फ्रेम निश्चित रूप से एक और चर है ... –

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