2012-04-05 18 views
22

मुझे मोबाइल और डेस्कटॉप स्क्रीन आकारों पर आंकड़े कहां मिल सकते हैं?मोबाइल और डेस्कटॉप स्क्रीन आकार के आंकड़े

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

तो बस स्पष्ट होने के लिए, मैं चाहता हूं कि फोन शैलियों का एक सेट, और टैबलेट और डेस्कटॉप के पास एक और सेट हो।

धन्यवाद

+0

ईजी अगर मैं 600px विस्तृत, शायद लगभग सभी डेस्कटॉप पर एक ब्रेकपाइंट डाल और गोलियों बड़ा हो सकता है, और लगभग सभी फोन होगा छोटा हो? – Evans

उत्तर

40

मैं सिर्फ एक उत्तरदायी व्यापार वेबसाइट (https://plus.google.com/101258044853419629282/posts/GejAf734nP6) कर समाप्त हो गया और यहाँ है क्या मैं आपको बता सकता - ब्रेकपॉइंट निश्चित रूप से 600px नहीं है!

  1. 1366px डेस्कटॉप चौड़ाई सिर्फ सबसे लोकप्रिय आकार के रूप में 1024px गुणा पार: http://techcrunch.com/2012/04/11/move-over-1024x768-the-most-popular-screen-resolution-on-the-web-is-now-1366x768/

  2. फिर भी, टेबलेट पर आईपैड

    यहाँ तथ्यों (सीएसएस के मामले में और @media प्रश्नों) कर रहे हैं इसके 1024x768px सबसे लोकप्रिय है।

  3. आईओएस सफारी सचेत है और हमेशा उचित व्यूपोर्ट की रिपोर्ट करता है, यानी। कोई फर्क नहीं पड़ता कि आपके पास नियमित आईपैड या रेटिना आईपैड है, तो यह आपको 1024x768 बताएगा, इसी प्रकार आईफोन आपको 320x480 बताएगा।

  4. एंड्रॉइड ब्राउज़र में और समस्याएं हैं, क्योंकि स्क्रीन इस प्लेटफ़ॉर्म पर भिन्न होती है। उदाहरण के लिए, नेक्सस वन में 480x800px स्क्रीन है, लेकिन 254ppi (पिक्सेल अनुपात 1.5) पर सीएसएस को रिपोर्ट किया गया व्यूपोर्ट वास्तव में 360x600 है। यहां तक ​​कि मजेदार गैलेक्सी नेक्सस में 316ppi (पिक्सेल अनुपात 2.0, रेटिना की तरह) पर 1280x720px स्क्रीन है, रिपोर्ट किया गया व्यूपोर्ट 360 * 640 है।

अपवाद Android 4.0 पर क्रोम बीटा, लैंडस्केप मोड में यह एक बग है और लगता है यह 1280px कि Galaxy Nexus के रूप में व्यूपोर्ट चौड़ाई की रिपोर्ट की तरह, यह बहुत डेस्कटॉप सीएसएस का विरोध नहीं करने के लिए मुश्किल बना रही है।

निष्कर्ष

मैं व्यक्तिगत रूप से 768px स्क्रीन चौड़ाई का एक ब्रेकप्वाइंट का इस्तेमाल किया है, अर्थात्: मैं आईपैड डेस्कटॉप के रूप में परिदृश्य में इलाज, और मुझे लगता है कम से कम डेस्कटॉप आकार 1024px गुणा है। लेकिन मैं पुराने दिनों की तरह 800px भी मान सकता हूं। फिर, मैं विशेष रूप से आईपैड पोर्ट्रेट के लिए 768 पीएक्स का इलाज करता हूं, क्योंकि गैर-रेटिना आईपैड में बहुत सी जगह है, यह अभी तक बहुत छोटी स्क्रीन नहीं है। फिर, 768px से कम सबकुछ मैं एक छोटे-स्क्रीन स्मार्टफोन को कॉल करता हूं।

अधिकतम अनुकूलन के लिए आप 640px पर अंतरिम breakpoints इस्तेमाल कर सकते हैं, 600px, 480px गुणित, 360px, 320px और यहां तक ​​कि 240px (कम लो-एंड एंड्रोइड्स) लेकिन यह शायद यह पूरी तरह से% आधारित नीचे 768px बनाने के लिए एक अच्छा अभ्यास है, इसलिए इसमें स्वचालित रूप से फिट बैठता है।

अद्यतन: मुझे मिला एक उपयोगी ब्रेकपॉइंट 810px है - एक फेसबुक टैब में आईफ्रेम की चौड़ाई। जब आप एफबी ऐप्स बनाते हैं तो सहायक होते हैं और अपने वेबएप कोड का पुन: उपयोग करना चाहते हैं।

+1

मैंने अपने प्रश्न में यह स्पष्ट नहीं किया लेकिन मोबाइल द्वारा मेरा मतलब वास्तव में सिर्फ फोन, टैबलेट जिन्हें मैं डेस्कटॉप के रूप में देखना चाहता हूं। ऐसा लगता है कि टैबलेट के लिए सबसे छोटी चौड़ाई 768 है। इसलिए यदि मैं अपने 'मोबाइल' स्टाइलशीट्स के लिए 768 के तहत चौड़ाई को लक्षित करता हूं, तो क्या मैं सुरक्षित रूप से मान सकता हूं कि कोई टैबलेट डिवाइस इन शैलियों को प्राप्त नहीं करेगा? धन्यवाद – Evans

+0

विकिपीडिया द्वारा निर्णय (https://en.wikipedia.org/wiki/Comparison_of_Android_devices#Tablet_computers) सबसे छोटा सेन टैबलेट वास्तव में 768 चौड़ाई है। मैं उस सूची में कुछ छोटी स्क्रीन देखता हूं, लेकिन आप इसे वास्तव में एक टैबलेट नहीं कह सकते हैं। इसलिए, यदि आप ** अधिकतम-चौड़ाई: 767 पीएक्स ** पर ब्रेकपॉइंट सेट करते हैं तो शेन टैबलेट दोनों परिदृश्य और चित्र में डेस्कटॉप संस्करण प्रदर्शित करेंगे। चौड़ाई 800px और पिक्सेल अनुपात 1.0 के साथ गोलियों के लिए वही। कुछ भी छोटा या उच्च पिक्सेल अनुपात मोबाइल संस्करण प्रदर्शित करेगा। साथ ही, मुझे विश्वास नहीं है कि बाजार पर एक स्मार्टफोन है जो 800 पीएक्स और पिक्सेल अनुपात 1.0 है, केवल 1.5 या अधिक – f055

+0

आपके उत्तर के लिए धन्यवाद लेकिन 'साइन टैबलेट' क्या है? – Evans

0

960 x 800 x 768 x 640 x 480 x 360 आकार हैं आपने प्रतिक्रियाशील वेब डिज़ाइन

+1

आईफ़ोन में 320px चौड़ाई – Matthew

2

के लिए पालन करना होगा नवीनतम संकल्प आँकड़े के लिए इस यूआरएल में दिनांक सीमा बदलें: http://gs.statcounter.com/#resolution-na-monthly-200903-201401

जिन परियोजनाओं पर मैंने बनाया है, उनके पास 1024px चौड़ाई पर मीडिया क्वेरी ब्रेक पॉइंट है क्योंकि यह आईपैड 1, 2 & की चौड़ाई है जो नीचे "मिनी" है और सबकुछ ऊपर आईपैड + डेस्कटॉप है।

इस प्रकार @nytimes डेवलपर इसे कर रहे हैं। देखें: जावास्क्रिप्ट जैबर पॉडकास्ट 093: http://javascriptjabber.com/093-jsj-the-new-york-times-and-javascript-with-eitan-konigsburg-alastair-coote-and-reed-emmons/ जहां वे 10:40 पर इसका वर्णन करते हैं।

डिवाइस के प्रस्तावों की एक अधिक व्यापक सूची के लिए: http://mobile.smashingmagazine.com/2013/03/21/responsive-web-design-with-physical-units/

हमेशा की यह निर्भर करता हैजो आप लक्षित कर रहे। यदि आप बच्चों के लिए साइट/ऐप बना रहे हैं (जिनमें से कई कम अंत एंड्रॉइड) आपको 320px (चौड़ाई) पर ब्रेक पॉइंट के साथ "अल्ट्रा-मोबाइल" संस्करण की आवश्यकता हो सकती है।

-1

यदि कोई statcounter.com पर देखता है और W3C जैसे स्रोतों की तुलना करता है तो उसके बारे में संदेह हो सकता है कि उन्हें संख्याएं कैसे मिलीं।

आप एक असली आंकड़े प्राप्त करना चाहते हैं, plz इस साइट पर जाएँ: browser display, high screen resolution

+0

w3schools एक भयानक अनुशंसा है, और मुझे उनके पास एक चीज़ पर भरोसा नहीं होगा। केवल एक चीज जो वे उपयोगी हैं, कभी-कभी सिंटैक्स जांच होती है। स्टेटकॉन्टर ने वास्तव में कहा है कि वे अपने आंकड़े कैसे प्राप्त करते हैं, और यह बहुत सरल है। http://gs.statcounter.com/faq#methodology – LocalPCGuy

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