common.you_need_to_be_loggedin_to_add_tool_in_favorites
स्क्रिन रिजोल्युसन सिम्युलेटर कुनै पनि वेबपेज पूर्वावलोकन गर्नुहोस्
कुनै पनि स्क्रिनसँग मिल्ने गरी लाइभ वेबसाइट पूर्वावलोकन तयार गर्नुहोस्।
एउटा लोकप्रिय उपकरण छान्नुहोस्, अभिमुखीकरण फ्लिप गर्नुहोस्, वा ठ्याक्कै पिक्सेल आकारमा डायल गर्नुहोस्। हामी तपाईंको छनोटको आकारमा स्यान्डबक्स गरिएको विन्डो खोल्नेछौं ताकि तपाईं प्रतिक्रियाशील लेआउटहरूमा छिटो दोहोर्याउन सक्नुहुन्छ।
सिमुलेशन सारांश
- भ्यूपोर्ट चौडाइ
- भ्यूपोर्ट उचाइ
- पक्ष अनुपात
- पूर्व निर्धारित
स्केल गरिएको भ्यूपोर्ट पूर्वावलोकन
भिजुअल फ्रेमले तपाईंको पक्ष अनुपात प्रतिबिम्बित गर्दछ। यो आकारमा लाइभ साइटसँग अन्तर्क्रिया गर्न पूर्वावलोकन विन्डो सुरु गर्नुहोस्।
प्रतिलिपि गर्न तयार 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.