वास्तविक रेटिना डिस्प्ले के बिना विंडोज पर रेटिना के लिए एक वेबसाइट का परीक्षण कैसे करें?


85

क्या विंडोज पर रेटिना डिस्प्ले को अनुकरण करने का एक तरीका है कि रेटिना जैसे HiDPI डिस्प्ले के लिए किसी वेबसाइट का परीक्षण किया जाए?

मैं एक मानक 24 "1920x1080 मॉनिटर पर विंडोज चलाता हूं। पिछली रात मैंने एक मित्र ब्रांड 15 15 पर अपनी वेबसाइट की जांच की" रेटिना मैकबुक प्रो और ग्राफिक्स सभी धुंधला दिख रहा था (नियमित 15 इंच मैकबुक पर इससे भी बदतर), जबकि फ़ॉन्ट था सुपर क्रिस्प और शार्प, लोगो को प्रत्यक्ष तुलना की वजह से और भी बदतर बना देता है।

मैंने अपनी वेबसाइट रेटिना को तैयार करने के लिए इस ट्यूटोरियल का अनुसरण किया है:

http://line25.com/tutorials/how-to-create-retina-graphics-for-your-web-designs

जब से मेरे पास कोई पृष्ठभूमि चित्र नहीं है, मैंने रेटिना.जेएस दृष्टिकोण का उपयोग किया।

क्या मेरे लिए यह परीक्षण करने का कोई तरीका है कि क्या यह वास्तव में काम करता है? जाहिर है मैं अपने दोस्त से अपनी रेटिना नोटबुक का उपयोग करने के लिए कह सकता हूं लेकिन यह मेरे लिए संभव नहीं है। मैं अपने स्वयं के वातावरण में रेटिना संगतता के लिए कम से कम मोटे तौर पर परीक्षण वेबसाइटों में सक्षम होना चाहता हूं।


2
सहायक हो सकता है: stackoverflow.com/questions/12243549/…
JSuar

@ जसर: दुर्भाग्य से यह नहीं है। जावास्क्रिप्ट लाइब्रेरी रेटिना.जेएस के साथ काम नहीं करती है और ओपेरा मोबाइल सामान के लिए लगता है।
अलेक्जेंडर रीचस्टीनर

2
Png या jpg के बजाय SVG में अपने लोगो जैसे सभी चित्र बनाने का प्रयास करें।
सिपाही

जवाबों:


152

के बारे में: फ़ायरफ़ॉक्स पर कॉन्फ़िगर हैक

आप वास्तव में फ़ायरफ़ॉक्स का उपयोग कर सकते हैं:

  1. "के बारे में: config" पर जाएं
  2. "Layout.css.devPixelsPerPx" ढूंढें
  3. इसे अपने इच्छित अनुपात में बदलें (सामान्य के लिए 1, रेटिना के लिए 2, आदि -1 डिफ़ॉल्ट लगता है।)

स्क्रीनशॉट:

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

यह फ़ायरफ़ॉक्स 21.0 के साथ विंडोज 7 पर ठीक काम करता है, और फ़ायरफ़ॉक्स 27.0.1 के साथ मैक ओएस एक्स पर भी।

यदि आप मीडिया के प्रश्नों और अन्य उन्नत तर्क (यानी आप सभी को HiDPI चित्र खिला रहे हैं) का उपयोग नहीं कर रहे हैं, तो आप बस अपने ब्राउज़र को 200% तक ज़ूम इन कर सकते हैं। Chrome इम्यूलेशन एक सहायक उपकरण होने के साथ-साथ मीडिया के प्रश्नों में भी शामिल है, लेकिन क्योंकि यह ज़ूम करने से रोकता है, आप छवि गुणवत्ता की जांच नहीं कर सकते।

फ़ायरफ़ॉक्स और एज पर ज़ूम करना

वर्तमान में फ़ायरफ़ॉक्स और एज पर, यदि आप ज़ूम करते हैं तो यह dppx- आधारित मीडिया प्रश्नों को ट्रिगर करता है। तो यह आसान तरीका पर्याप्त हो सकता है, लेकिन ध्यान रखें कि कार्यक्षमता को फ़ायरफ़ॉक्स के लिए "ठीक नहीं करेगा" बग के रूप में रिपोर्ट किया गया है , इसलिए यह बदल सकता है।


2
किसी को भी पता है, क्या क्रोम के लिए भी कुछ ऐसा ही है?
Krzysztof Romanowski

@castus ऐसा मत सोचो, आपको जो सबसे अच्छा मिला है वह झूम रहा है और मुझे नहीं लगता कि मीडिया के प्रश्नों में कोई कमी है।
andrewb

@andrewb: मैं एक ही बात सोच रहा था क्योंकि इसने मेरी प्रतिष्ठा को बढ़ाया (याय!)। हो सकता है कि यह लगातार खोज शब्द के लिए Google में अनुक्रमित हो गया हो।
अलेक्जेंडर रीचस्टिनर

@AlexanderRechsteiner यह वास्तव में स्मैशिंग मैगज़ीन के फेसबुक पेज से जुड़ा हुआ है और फेसबुक के आसपास काफी लोगों द्वारा साझा किया गया था। मेरे उत्तर को स्वीकार करने के लिए धन्यवाद!
andbb

@ChristinaArasmoBeymer हां, यह कर सकते हैं
andrewb

25

Google Chrome संस्करण "33.0.1720.0 कैनरी" में, आप अब "डिवाइस पिक्सेल अनुपात", "एंड्रॉइड फ़ॉन्ट मेट्रिक्स" और "व्यूपोर्ट एमुलेशन" जैसे महान मापदंडों के साथ iPhone5 और अन्य जैसे उपकरणों का अनुकरण कर सकते हैं ।

वैसे भी फ़ायरफ़ॉक्स हैक के लिए कोई ज़रूरत नहीं है - वैसे भी काम करना मुश्किल है।

धन्यवाद Google देव टीम! ! :)


1
मैंने MediaQueries को नहीं देखा, लेकिन छवि गुणवत्ता की समीक्षा करने के संदर्भ में, मैं यह नहीं देखता कि यह कैसे सहायक है। आपको पिक्सेल X2 को बढ़ावा देने की आवश्यकता है, अन्यथा आप नेत्रहीन यह नहीं देख पाएंगे कि कौन सी सामग्री रेटिना-तैयार है और जो नहीं है। मैंने एक त्वरित परीक्षण किया, और क्रोम ने सिर्फ google.com वेबसाइट को छोटा बना दिया, लेकिन फ़ायरफ़ॉक्स पर जाने से मुझे पता चला कि उस समय Google डूडल रेटिना पिक्सेल घनत्व नहीं था। लेकिन हे, अगर यह लोगों के लिए काम करता है, तो इसका मतलब है कि फ़ायरफ़ॉक्स कॉन्फ़िगरेशन के साथ पागल बड़ी यूआई को छोड़ देना!
andrewb

हाँ, यहाँ बिंदु छवि गुणवत्ता को बढ़ाने के लिए नहीं है (यह असंभव है, क्योंकि भौतिक स्क्रीन एक ही पिक्सेल घनत्व के साथ बनी हुई है), लेकिन यह सुनिश्चित करने के लिए, एक रेटिना मैक के बिना एक डेवलपर के रूप में, कि आप अभी भी सभी आधारों को कवर कर रहे हैं।
अर्ब जिम टैम

यदि आप केवल छवि गुणवत्ता की समीक्षा करना चाहते हैं, तो आपको कुछ भी करने की आवश्यकता नहीं है, लेकिन अपने ब्राउज़र को 200% ज़ूम करें। यदि आप Chrome में मीडिया क्वेरी चलाना चाहते हैं, तो आपको दोनों करना चाहिए: ज़ूम करें और अनुकरण करें।
माइकल मैकगिनिस

@MichaelMcGinnis मैं Chrome के साथ अनुकरण और ज़ूम करने में असमर्थ हूं, क्या आप सक्षम हैं?
andrewb

हाँ @andrewb, ऐसा लगता है कि इसे अलग-अलग परीक्षणों की आवश्यकता है। जब मैं ज़ूम करता हूं और फिर अनुकरण करता हूं, तो चित्र फिर से छोटे हो जाते हैं। अनुकरण करते समय ज़ूम करने से छवि का आकार प्रभावित नहीं होता है।
माइकल मैकगिनिस

14

क्रोम में आप इसे कर सकते हैं:

1) क्रोम डेवलपर टूल खोलें और छोटे "गियर" आइकन पर क्लिक करें। यहाँ छवि विवरण दर्ज करें


2) फिर कंसोल ड्रॉअर में "एमुलेशन 'दृश्य चुनें।" यहाँ छवि विवरण दर्ज करें


3) अंत में, डेवलपर टूल में "कंसोल ड्रावर" खोलें, और इम्यूलेशन चुनें । स्क्रीन का अनुकरण सेट करें और डिवाइस पिक्सेल अनुपात को 2.5 पर सेट करें ।

यहाँ छवि विवरण दर्ज करें


धन्यवाद। यह वर्तमान क्रोम में कुछ समान है। क्या सभी रेटिना डिस्प्ले के 2.5लिए सिंगल मैजिक नंबर है? या 2014 के बाद से इसमें वृद्धि / कमी हुई? संपादित करें: आह, यह यहाँ है
crusy

10

जहां तक ​​मैं बता सकता हूं, रेटिना डिवाइस खरीदने के अलावा यह संभव नहीं है।

कुछ कामगार

कम प्रासंगिक


धन्यवाद, developer.apple.com से बुलेट पॉइंट मुझे सही रास्ते पर मिला। जैसा कि स्टैक ओवरफ्लो पर यहां अन्य जवाब है
एलेक्स केंड्रिक

7

Google Chrome के साथ एक रेटिना (HiDPI) प्रदर्शन का अनुकरण करने की वर्तमान विधि

1) वेब पेज पर " राइट क्लिक " करें फिर क्रोम के डेवलपर टूल को खोलने के लिए " निरीक्षण " का चयन करें

2) " टॉगल डिवाइस मोड " आइकन पर क्लिक करें

टॉगल डिवाइस मोड आइकन पर क्लिक करें

3) स्क्रीन के शीर्ष पर डिवाइस ड्रापडाउन बॉक्स पर, "का चयन करें HiDPI स्क्रीन के साथ लैपटॉप "

HiDPI स्क्रीन के साथ लैपटॉप का चयन करें

4) अब आप देख सकते हैं कि वेबसाइट रेटिना उर्फ ​​HiDPI स्क्रीन पर कैसे दिखाई देगी


1

मैं गतिशील रूप से चित्र बनाने के लिए लाइब्रेरी के आकार वाली छवि का उपयोग करता हूं। 2x संस्करण के लिए मैं डिबगिंग के दौरान एक गतिशील वॉटरमार्क जोड़ता हूं - इससे यह देखना बहुत आसान हो जाता है कि उच्च-रिज़ॉल्यूशन छवि वास्तव में दिखाई जा रही है या नहीं। इसे बहुत मददगार पाया है।

जिस तरह से यह काम करता है, वह नमूना कोड सहित अलग-अलग होगा।


1

Google Chrome संस्करण 80

  1. डेवलपर टूल खोलें ctrl-shift j
  2. शीर्ष पर स्थित टैबलेट / फोन आइकन पर क्लिक करके डिवाइस टूलबार को टॉगल करें (यदि आप इसे क्लिक करते हैं तो यह नीला हो जाएगा)

यहाँ छवि विवरण दर्ज करें

  1. अब व्यूपोर्ट के ऊपर एक टूलबार होना चाहिए। ऊपरी दाईं ओर स्थित विकल्प आइकन (3 डॉट्स) पर क्लिक करें और डिवाइस पिक्सेल अनुपात विकल्प जोड़ें चुनें।

यहाँ छवि विवरण दर्ज करें

  1. अब आपको टूलबार पर विकल्प देखना चाहिए। यहां से आप 1x, 2x या 3x पर स्विच कर सकते हैं।

यहाँ छवि विवरण दर्ज करें

  1. जब आप परीक्षण कर रहे हैं, तो सुनिश्चित करें कि आप हर बार पिक्सेल अनुपात बदलने पर ताज़ा बटन दबाते हैं। यदि आप अनुपात को 2x पर सेट करते हैं और फिर इसे वापस कम पर सेट करते हैं, तो आपको कोई भी परिवर्तन नहीं दिखाई देगा क्योंकि ब्राउज़र 1x परिसंपत्तियों को नहीं लाएगा यदि यह पहले से 2x या उच्चतर प्राप्त कर चुका है।

-1

मुझे नहीं पता कि यह बहुत सरल है, मैं ctrl और स्क्रॉल दबाता हूं और यह मीडिया क्वेरी को ट्रिगर करता है। मैंने इसे बुग्जिला में जाँच लिया है और यह काम करता है। मैं svg स्केलिंग के बारे में निश्चित नहीं हूं क्योंकि यह धुंधली दिखाई देती है, लेकिन यह svg इमेज है।


आप किस ब्राउज़र या हार्डवेयर का उपयोग कर रहे हैं? क्या आपका मतलब बुगज़िला के बजाय मोज़िला से है?
माइकल मैकगिनिस

-3

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


हाँ, और आप विंडोज़ में VM के रूप में os x चला सकते हैं
filtah

@ फील्टाह वास्तव में सबसे बुरा सुझाव नहीं है
पॉल

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