विकासमा छ

स्क्रिन रिजोल्युसन सिम्युलेटर कुनै पनि वेबपेज पूर्वावलोकन गर्नुहोस्

विज्ञापन

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

एउटा लोकप्रिय उपकरण छान्नुहोस्, अभिमुखीकरण फ्लिप गर्नुहोस्, वा ठ्याक्कै पिक्सेल आकारमा डायल गर्नुहोस्। हामी तपाईंको छनोटको आकारमा स्यान्डबक्स गरिएको विन्डो खोल्नेछौं ताकि तपाईं प्रतिक्रियाशील लेआउटहरूमा छिटो दोहोर्याउन सक्नुहुन्छ।

पहिलो पटक सिम्युलेटर चलाउँदा पप-अप ब्लकरहरूलाई नयाँ विन्डो अनुमति दिनुपर्ने हुन सक्छ।

सिमुलेशन सारांश

भ्यूपोर्ट चौडाइ
भ्यूपोर्ट उचाइ
पक्ष अनुपात
पूर्व निर्धारित

स्केल गरिएको भ्यूपोर्ट पूर्वावलोकन

भिजुअल फ्रेमले तपाईंको पक्ष अनुपात प्रतिबिम्बित गर्दछ। यो आकारमा लाइभ साइटसँग अन्तर्क्रिया गर्न पूर्वावलोकन विन्डो सुरु गर्नुहोस्।

प्रतिलिपि गर्न तयार CSS सहयोगीहरू

उत्तरदायी डिजाइन चेकलिस्ट

  • यो उपकरणलाई आफ्नो ब्राउजर devtools सँग संयोजन गरेर ब्रेकपोइन्टहरू प्रमाणित गर्नुहोस्—एकरूप QA को लागि समान पिक्सेल चौडाइहरूलाई लक्षित गर्नुहोस्।
  • मोबाइल लेआउटहरूको लागि दुवै अभिमुखीकरण परीक्षण गर्नुहोस्; सिम्युलेटरले तुरुन्तै चौडाइ र उचाइ बदल्छ।
  • सरोकारवालाहरूको लागि UI अवस्थाहरू कागजात गर्न वा रिलीज नोटहरू गर्न पपअप विन्डोबाट स्क्रिनसटहरू खिच्नुहोस्।
तत्काल, सटीक एकाइ रूपान्तरण अनलाइन लागि व्यावसायिक स्क्रिन रिजोल्युसन सिम्युलेटर
विज्ञापन

सामग्री तालिका

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

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

लाइभ, स्टेजिंग, वा साझेदारी लिङ्क प्रयोग गर्नुहोस्। यस तरिकाले, फन्टहरू, स्क्रिप्टहरू, एनालिटिक्सहरू, र सामग्रीहरू प्रयोगकर्ताहरूले तिनीहरूलाई देखे जस्तै देख्नेछन्। यो दुबै मोबाइल पूर्वावलोकन र डेस्कटप जाँच लागि महत्त्वपूर्ण छ.

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

ट्याब्लेट र फोन किनारा केसहरू पर्दाफास गर्न फ्लिप अभिमुखीकरण। स्क्रिनशटहरू साझेदारी गर्न र द्रुत साइन-अफ प्राप्त गर्न नयाँ ट्याबमा पूर्वावलोकन खोल्नुहोस्।

फोल्डको माथि कुञ्जी सामाग्री राख्नुहोस्

सुनिश्चित गर्नुहोस् कि नायक, हेडलाइन, र प्राथमिक CTA 390 देखि 414 px जस्ता सानो चौडाइमा देखिन सकिन्छ। यदि तपाईँले महत्त्वपूर्ण कार्यहरू लुकाउनुहुन्छ भने, तपाईँले खाली स्थान परिवर्तन गर्न सक्नुहुन्छ, पाठ छोटो पार्न सक्नुहुन्छ, वा सुरुआत गर्नु अघि भागहरू रिसाइज गर्न सक्नुहुन्छ।

नेभिगेसन, ग्रिडहरू, र फारमहरू प्रमाणित गर्नुहोस्

तनाव परीक्षण ह्यामबर्गर मेनू, स्टिकी हेडरहरू, र अफ-क्यानभास प्यानलहरू। अप्ठ्यारो लेआउट शिफ्टहरूको लागि कार्ड ग्रिडहरू जाँच गर्नुहोस् र पुष्टि गर्नुहोस् कि फारमहरू टच स्क्रिनहरूमा पढ्न योग्य र ट्याप गर्न योग्य छन्।

सुरुआत गर्नु अघि उत्तरदायी विच्छेद बिन्दुहरू यकिन गर्नुहोस्

कम्पोनेन्टहरू कहाँ सिफ्ट हुन्छन् भनेर हेर्नको लागि साझा चौडाइ सफा गर्नुहोस्। यदि यो 360 र 414 मा रहन्छ तर 390 मा ब्रेक हुन्छ भने, एक ब्रेकपोइन्ट थप्नुहोस्। तपाईं डिजाइनलाई अझ राम्रो बनाउनको लागि न्यूनतम र अधिकतम चौडाइ पनि समायोजन गर्न सक्नुहुनेछ।

लोकप्रिय फोन, ट्याब्लेट, र डेस्कटप प्रिसेटहरू

गो-टु चौडाइको साथ द्रुत रूपमा अधिकांश परिदृश्यहरू कभर गर्नुहोस्

320, 360, 390, 414, 768, 1024, 1280, 1440, 1920, 2560, 3840

उचाइ अनुसार पिक्सेल पूर्ण अनुकूल चौडाइ

ल्यान्डिङ पृष्ठहरू, ड्यासबोर्डहरू, र अनुप्रयोग-जस्तै लेआउटहरूको लागि सटीक आयामहरू प्रविष्ट गर्नुहोस्। आदर्श जब तपाईंलाई सटीक डेस्कटप रिजोलुसन परीक्षक चाहिन्छ।

दृश्यपोर्ट बनाम पर्दा रिजोल्युसन 

भ्यूपोर्ट सीएसएसमा क्षेत्र हो जसले विभिन्न उपकरणहरूमा चीजहरू कसरी देखिन्छन् भनेर नियन्त्रण गर्दछ। पर्दा रिजोल्युसनले यन्त्रको पिक्सेल ग्रिडलाई जनाउँछ । पृष्ठभूमिको रूपमा रिजोलुसनलाई विचार गर्नुहोस्। पहिले दृश्यपोर्टमा फोकस गर्नुहोस् ।

यूआरएल टाँस्नुहोस्, त्यसपछि साइज लिनुहोस्, त्यसपछि पूर्वावलोकन गर्नुहोस्

. सानादेखि ठूलोसम्म काम गर्ने । मोबाइलदेखि ट्याब्लेटसम्म डेस्कटपदेखि ठूलो डेस्कटपसम्म । यो अनुक्रमले तनाव बिन्दुहरू चाँडै उजागर गर्दछ र पुन: काम कम गर्दछ।

मुद्दाहरू पत्ता लगाउनुहोस् र स्क्रिनसट क्याप्चर गर्नुहोस्

स्क्यान हेडर, नायक, प्राथमिक सीटीए, उत्पादन कार्डहरू, फारमहरू, र फुटर। समस्या चौडाइहरू क्याप्चर गर्नुहोस् जस्तै मेनु र्यापहरू 390 px मा र छिटो टर्नअराउन्डको लागि संक्षिप्त फिक्स नोटहरू थप्नुहोस्।

महीन सजावटका लागि प्रो सुझावहरू

• मेनु लेबलहरू छोटो राख्नुहोस् र मुख्य कार्य पहिले राख्नुहोस्।

• अनाथहरूबाट बच्नको लागि समझदार अन्तरालहरूको साथ लचिलो ग्रिडहरू प्रयोग गर्नुहोस्

• मिडिया कन्टेनरहरू परिभाषित गर्नुहोस् र लेआउट शिफ्टहरू रोक्न उत्तरदायी छविहरू प्रयोग गर्नुहोस्

मेनु ओभरल्याप र टाँसिने हेडरहरू फिक्स गर्नुहोस्

लेबलहरू छोटो पार्नुहोस्, ओभरफ्लोमा माध्यमिक लिङ्कहरू सार्नुहोस्, प्याडिङ कम गर्नुहोस्, र स्टिकी अफसेटहरू प्रमाणित गर्नुहोस् ताकि सामग्री लुकेको छैन।

ट्याब्लेट चौडाइमा कार्ड बेराइ सुधार गर्नुहोस्

लगभग 768 देखि 1024 px अनुमानित अन्तरालको साथ दुई स्थिर स्तम्भहरूमा स्विच गर्नुहोस्। लगभग तीन स्तम्भहरूबाट बच्नुहोस् जुन र्याग्ड र्यापहरू बाध्य पार्छ।

उत्तरदायी स्रोतहरूको साथ तीक्ष्ण छविहरू

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

गुगल SERP सिमुलेटर: पूर्वावलोकन शीर्षक र मेटा प्रकाशित गर्नु अघि।

स्पाइडर सिमुलेटर: क्रलरहरूले तपाईंको पृष्ठमा के क्याप्चर गर्दछ फेला पार्नुहोस्

ग्राफ जाँच खोल्नुहोस्: साझेदारी शीर्षक, विवरण, र छवि प्रमाणित गर्नुहोस्।

प्रयोगकर्ता अभिकर्ता स्ट्रिङ दर्शक: पत्ता लगाइएको ब्राउजर र यन्त्र विवरण यकिन गर्नुहोस् ।

स्क्रिन रिजोलुसन परिवर्तन गर्नुहोस्: डेमो वा स्क्रीनशटको लागि तपाईंको आफ्नै प्रदर्शन स्विच गर्नुहोस्।

नियन्त्रक कम्पन परीक्षक: ब्राउजर गेमप्याड पत्ता लगाउने र रम्बलमा प्रमाणित गर्नुहोस्।

API कागजात चाँडै आउँदैछ

Documentation for this tool is being prepared. Please check back later or visit our full API documentation.

विज्ञापन

बारम्बार सोधिने प्रश्नहरू

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

  • हो । तपाईंको डिजाइन प्रणाली वा एनालिटिक्स आउटलेरहरूसँग मेल खाने सटीक चौडाइ र उचाइहरू प्रविष्ट गर्नुहोस्। फोल्ड-संवेदनशील ल्यान्डिङ पृष्ठहरूको लागि उत्कृष्ट।

  • लेआउट मुख्यतया चौडाइमा निर्भर गर्दछ, तर घनत्वले छवि तीक्ष्णता र केही मिडिया प्रश्नहरूलाई पनि असर गर्दछ। दृश्यहरू सुसंगत छन् भनेर सुनिश्चित गर्न यसलाई एक सघन चौडाइ र एक मानक चौडाइमा जाँच गर्नुहोस्।