উইন্ডোতে প্রকৃত রেটিনা প্রদর্শন ছাড়াই উইন্ডোতে রেটিনার জন্য কোনও ওয়েবসাইট কীভাবে পরীক্ষা করবেন?

Question

উইন্ডোতে রেটিনার মতো হাইডিপিআই ডিসপ্লেগুলির জন্য কোনও ওয়েবসাইট পরীক্ষা করার জন্য একটি রেটিনা প্রদর্শন অনুকরণ করার কোনও উপায় আছে কি?

আমি একটি স্ট্যান্ডার্ড 24 "1920x1080 মনিটরে উইন্ডোজ চালিয়েছি Last গত রাতে আমি আমার ওয়েবসাইট ব্র্যান্ড নিউ 15" রেটিনা ম্যাকবুক প্রোতে পরীক্ষা করেছিলাম এবং গ্রাফিকগুলি সমস্ত অস্পষ্ট দেখাচ্ছে (নিয়মিত 15 ইঞ্চি ম্যাকবুকের চেয়েও খারাপ), যখন ফন্টটি ছিল সরাসরি চিকিত্সা করার কারণে লোগোটিকে আরও খারাপ দেখা দেয় super

আমি আমার ওয়েবসাইট রেটিনা প্রস্তুত করতে এই টিউটোরিয়ালটি অনুসরণ করেছি:

http://line25.com/tutorials/how-to-create-retina-رافিক্স- জন্য- আপনার- ওয়েবে- ডিজাইন

আমার কোনও ব্যাকগ্রাউন্ড চিত্র না থাকায় আমি রেটিনা.জেএস পদ্ধতির ব্যবহার করেছি।

এটি যদি বাস্তবে কাজ করে তবে আমার পরীক্ষার কোনও উপায় আছে? স্পষ্টতই আমি আমার বন্ধুকে তার রেটিনা নোটবুকটি ব্যবহার করতে বলতে চাইতে পারি তবে এটি আমার পক্ষে সম্ভবপর ওয়ার্কফ্লো নয়। আমি নিজের পরিবেশে রেটিনা সামঞ্জস্যের জন্য কমপক্ষে মোটামুটি ওয়েবসাইটগুলি পরীক্ষা করতে সক্ষম হতে চাই।

Comments

: সহায়ক হতে পারে stackoverflow.com/questions/12243549/...

— JSuar

@ জাসুয়ার: দুর্ভাগ্যক্রমে তা হয় নি। জাভাস্ক্রিপ্ট লাইব্রেরিটি retina.js এর সাথে কাজ করে না বলে মনে হয় এবং অপেরা মোবাইল স্টাফের জন্য বলে মনে হয়।

— আলেকজান্ডার রেকস্টেইনার

পিএনজি বা জেপিজির পরিবর্তে এসভিজিতে আপনার লোগোর মতো সমস্ত চিত্র তৈরি করার চেষ্টা করুন।

— Seph

Answer 1

সম্পর্কে: ফায়ারফক্সে কনফিগার হ্যাক

আপনি আসলে ফায়ারফক্স ব্যবহার করতে পারেন:

1. "সম্পর্কে: কনফিগারেশন" এ যান
2. "লেআউট.সিএস.দেবপিক্সেলসপর্পেক্স" সন্ধান করুন
3. এটিকে আপনার কাঙ্ক্ষিত অনুপাতে পরিবর্তন করুন (স্বাভাবিকের জন্য 1, রেটিনার জন্য 2 ইত্যাদি 1 -1 ডিফল্ট বলে মনে হয়))

স্ক্রিনশট:

আপনার পৃষ্ঠাটি রিফ্রেশ করুন - বুম, আপনার মিডিয়া ক্যোয়ারী এখন লাথি মেরেছে! ওয়েব বিকাশের জন্য দুর্দান্ত হওয়ার জন্য ফায়ারফক্সে টুপি! শীর্ষস্থানীয় ওয়েবসাইটগুলি এখন কেবল দ্বিগুণ আকারে বাড়ানো হবে না, ফায়ারফক্স ইউআইও দ্বিগুণ হবে। এই দ্বিগুণ করা বা জুম করা প্রয়োজনীয়, কারণ আপনি একমাত্র পন্থাটি স্ট্যান্ডার্ড পিক্সেল অনুপাতের স্ক্রিনে সমস্ত পিক্সেল পরীক্ষা করতে সক্ষম হবেন।

এটি ফায়ারফক্স ২১.০ এর সাথে উইন্ডোজ on এবং ফায়ারফক্স ২ 27.০.১ এর সাথে ম্যাক ওএস এক্সে দুর্দান্ত কাজ করে।

আপনি যদি মিডিয়া ক্যোয়ারী এবং অন্যান্য আরও উন্নত যুক্তি ব্যবহার না করে (যেমন আপনি সবাইকে হাইডিপিআই চিত্র খাওয়ান), আপনি কেবল আপনার ব্রাউজারের সাথে 200% জুম বাড়িয়ে নিতে পারেন। ক্রোম এমুলেশন একটি সহায়ক সরঞ্জাম পাশাপাশি এটি মিডিয়া অনুসন্ধানগুলিতে লাথি দেয়, তবে এটি জুমিং প্রতিরোধ করে তাই আপনি চিত্রের মান পরীক্ষা করতে পারবেন না।

ফায়ারফক্স এবং প্রান্তে জুম করা

বর্তমানে ফায়ারফক্স এবং এজে, আপনি এটি জুম করলে dppx- ভিত্তিক মিডিয়া ক্যোয়ারী ট্রিগার করে। সুতরাং এই সহজ পদ্ধতির পক্ষে যথেষ্ট হতে পারে তবে সচেতন হন যে কার্যকারিতাটি ফায়ারফক্সের জন্য "ঠিক করবে না" বাগ হিসাবে রিপোর্ট করা হয়েছে , যাতে এটি পরিবর্তন হতে পারে।

Comments

যে কেউ জানেন, ক্রোমের জন্য কি একই রকম কিছু রয়েছে?

— ক্রিজিসটফ রোমানসস্কি

@ কাস্টাস এমনটি ভাববেন না, আপনি যে সেরাটি পেয়েছেন তা জুম করছে এবং আমি মনে করি না যে মিডিয়া অনুসন্ধানগুলিতে এটি লাথি মারছে।

— অ্যান্ড্রুব

@ অ্যান্ড্রুব: আমার খ্যাতি (ইয়ে!) বাড়ানোর সাথে সাথে আমিও একই বিষয়টি ভাবছিলাম। গুগলে ঘন ঘন অনুসন্ধানের শব্দটির জন্য এটি সূচিবদ্ধ হতে পারে।

— আলেকজান্ডার রেকস্টেইনার

@ আলেকজান্ডাররেচস্টেইনার এটি স্ম্যাশিং ম্যাগাজিনের ফেসবুক পৃষ্ঠাটির সাথে সংযুক্ত হয়ে গেছে এবং বেশ কিছু লোক ফেসবুকের চারপাশে শেয়ার করেছিল। আমার উত্তর গ্রহণ করার জন্য ধন্যবাদ!

— অ্যান্ড্রুব

— @ খ্রিস্টিনাআরস্মোবেমির

Answer 2

গুগল ক্রোম সংস্করণ "33.0.1720.0 ক্যানারি" তে আপনি এখন আইফোন 5 এবং অন্যদের মতো ডিভাইসগুলি "ডিভাইস পিক্সেল অনুপাত", "অ্যান্ড্রয়েড ফন্ট মেট্রিক্স" এবং "ভিউপোর্ট এমুলেশন" এর মতো পরামিতিগুলির দুর্দান্ত সেট সহ অনুকরণ করতে পারেন ।

সেই ফায়ারফক্স হ্যাকের আর দরকার নেই - যেভাবেই হোক কাজ করা শক্ত।

ধন্যবাদ গুগল দেব দল! ! :)

Comments

আমি মিডিয়াকিউয়ার্সের দিকে নজর দিইনি, তবে কেবলমাত্র চিত্রের মানের পর্যালোচনা করার ক্ষেত্রে, আমি কীভাবে এটি সহায়ক তা দেখছি না। আপনাকে পিক্সেল এক্স 2 বৃদ্ধি করতে হবে, অন্যথায় আপনি কোন বিষয়বস্তু রেটিনা প্রস্তুত এবং কোনটি নয় তা দৃশ্যমানভাবে দেখতে পারবেন না। আমি একটি দ্রুত পরীক্ষা করেছি, এবং ক্রোম গুগল ডটকম ওয়েবসাইটটিকে ছোট দেখায়, তবে ফায়ারফক্সে গিয়ে আবিষ্কার করেছিলাম যে গুগল ডুডল তখনকার রেটিনা পিক্সেলের ঘনত্ব নয়। তবে ওহে, এটি যদি মানুষের পক্ষে কাজ করে তবে এর অর্থ ফায়ারফক্স কনফিগারেশনের মাধ্যমে পাগল বড় ইউআই এড়িয়ে যাওয়া!

— অ্যান্ড্রুব

হ্যাঁ, এখানে বক্তব্যটি চিত্রের গুণমানকে বাড়ানো নয় (এটি অসম্ভব, কারণ শারীরিক পর্দা একই পিক্সেল ঘনত্বের সাথে রয়ে গেছে), তবে নিশ্চিত হতে হবে যে রেটিনা ম্যাক ব্যতীত একজন বিকাশকারী হিসাবে আপনি এখনও সমস্ত ঘাঁটিটি আবরণ করছেন।

— আরব গিম ট্যাম

আপনি যদি কেবলমাত্র চিত্রের মানের পর্যালোচনা করতে চান তবে আপনার ব্রাউজারকে 200% জুম করা ছাড়া আপনার আর কিছু করার দরকার নেই। আপনি যদি ক্রোমে মিডিয়া ক্যোয়ারী চালাতে চান তবে আপনার দুটি করা উচিত: জুম এবং অনুকরণ করুন।

— মাইকেল ম্যাকগিনিস

@ মিশেলএমসিগিনিস আমি ক্রোমের সাথে অনুকরণ করতে এবং জুম করতে অক্ষম, আপনি কি সক্ষম হয়েছিলেন?

— অ্যান্ড্রুব

হ্যাঁ @ অ্যান্ড্রুব, দেখে মনে হচ্ছে এটি আলাদা পরীক্ষা করা দরকার। আমি যখন জুম করি এবং তারপরে অনুকরণ করি তখন চিত্রগুলি আবার ছোট হয়। এমুলেটিংয়ের সময় জুম করা চিত্রের আকারগুলিকে প্রভাবিত করে না।

— মাইকেল ম্যাকগিনিস

Answer 3

ক্রোমে আপনি এটি দ্বারা এটি করতে পারেন:

1) Chrome বিকাশকারী সরঞ্জামগুলি খুলুন এবং সামান্য "গিয়ার" আইকনে ক্লিক করুন।

---

2) তারপরে "কনসোল ড্রয়ারে 'এমুলেশন' দর্শন দেখান" "

---

3) অবশেষে, বিকাশকারী সরঞ্জামগুলিতে "কনসোল ড্রয়ার" খুলুন এবং এমুলেশনটি চয়ন করুন । সেট অনুকরণ পর্দা এবং সেট ডিভাইস পিক্সেল অনুপাত 2.5।

Comments

ধন্যবাদ এটি বর্তমান ক্রোমে কিছুটা অনুরূপ। কি 2.5জন্য একক ম্যাজিক নম্বর সব অক্ষিপট প্রদর্শন? বা 2014 এর পরে এটি বৃদ্ধি / হ্রাস পেয়েছে? সম্পাদনা: আহা, এটি এখানে

— 6-10 টায় ক্রুশে

Answer 4

আমি যতদূর বলতে পারি, রেটিনা ডিভাইস কেনা ছাড়া এটি আর সম্ভব নয়।

কিছু workaround

• এখানে প্রস্তাবিত:

  • আপনি যদি চিত্রের আকার এবং দ্বিগুণ হয়ে যান তবে এখনও একইরকম, আপনি বেশ নিরাপদ। পরীক্ষা করার জন্য আপনার কাছে রেটিনা প্রদর্শন না থাকলে পিক্সেল-অনুপাতের মিডিয়া ক্যোয়ারী থেকে প্রস্থ-ভিত্তিক কোনওটিতে স্যুইচ করুন।

  • টেস্টিং এবং সমস্যাসমাধান উচ্চ রিসোলিউশনের বিষয়বস্তু
    http://developer.apple.com/library/mac/#documentation/GraphicsAnimation/Conceptual/HighResolutionOSX/Testing/Testing.html

• রেটিনা ম্যাকবুক প্রো ছাড়াই কীভাবে হাইডিপিআই ("রেটিনা") বিকাশ করা যায়
  http://make.wordpress.org/ui/2012/08/01/dev-for-hidpi-without-retina-mbp/

• ওয়ার্ডপ্রেস রেটিনা চিত্রগুলি
  http://wpmu.org/wordpress-retina/

কম প্রাসঙ্গিক

• একটি প্রতিক্রিয়াশীল, রেটিনা প্রস্তুত ওয়েবসাইট কীভাবে তৈরি করবেন

• অ্যাপলের রেটিনা প্রদর্শনগুলির জন্য কীভাবে ডিজাইন করবেন
  http://www.studiopress.com/design/retina-display-design.htm

• রেটিনা প্রদর্শনগুলির জন্য ওয়েবসাইট তৈরি করা: পিক্সেলগুলির সাথে বন্ধু বানানো http://www.slideshare.net/shoshizilla/building-websites-for-retina-displays-making- Friendss-with-pixels
  

• রেটিনা প্রদর্শনের জন্য কীভাবে একটি ওয়েবসাইট বিকাশ করবেন?

• কিভাবে রেটিনা প্রস্তুত পেতে?

Comments

ধন্যবাদ, বিকাশকারী.অ্যাপল ডটকমের বুলেট পয়েন্টটি আমাকে সঠিক পথে পেয়েছে। স্ট্যাক ওভারফ্লোতে এখানে যেমন এই উত্তরটি দিয়েছে ।

— অ্যালেক্স কেন্ড্রিক

Answer 5

গুগল ক্রোমের সাথে একটি রেটিনা (হাইডিপিআই) প্রদর্শন অনুকরণের জন্য বর্তমান পদ্ধতি

1) ওয়েব পৃষ্ঠায় " ডান ক্লিক করুন " তারপরে Chrome এর বিকাশকারী সরঞ্জাম খুলতে " পরিদর্শন করুন" নির্বাচন করুন

2) " টগল ডিভাইস মোড " আইকনটি ক্লিক করুন

3) স্ক্রীনের উপরের অংশে ডিভাইস ড্রপডাউন বক্স অন, "নির্বাচন করুন HiDPI স্ক্রিন সঙ্গে ল্যাপটপ "

4) আপনি এখন দেখতে পাচ্ছেন যে ওয়েবসাইটটি কীভাবে একটি রেটিনা ওরফে হাইডিপিআই স্ক্রিনে প্রদর্শিত হবে

Answer 6

গতিশীলভাবে চিত্রগুলি তৈরি করতে আমি একটি চিত্র পুনরায় আকার দেওয়ার লাইব্রেরি ব্যবহার করি। 2x সংস্করণের জন্য আমি ডিবাগিংয়ের সময় একটি গতিশীল ওয়াটারমার্ক যুক্ত করি - এটি উচ্চ-রেজ-ইমেজটি আসলে প্রদর্শিত হচ্ছে কিনা তা সহজেই দেখা যায়। এটি খুব সহায়ক বলে মনে হয়েছে।

এই কাজ করার উপায়টি নমুনা কোড সহ নয় তাই আলাদা হবে।

Answer 7

গুগল ক্রোম সংস্করণ 80

1. বিকাশকারী সরঞ্জাম খুলুন ctrl-shift j
2. উপরের বামদিকে ট্যাবলেট / ফোন আইকনে ক্লিক করে ডিভাইস সরঞ্জামদণ্ডটি টগল করুন (আপনি এটি ক্লিক করলে এটি নীল হয়ে যাবে)

3. এখন ভিউপোর্টের উপরে একটি সরঞ্জামদণ্ড থাকা উচিত। উপরের ডানদিকে বিকল্প আইকন (3 বিন্দু) ক্লিক করুন এবং ডিভাইস পিক্সেল অনুপাত যোগ করুন বিকল্পটি নির্বাচন করুন ।

4. এখন আপনার সরঞ্জামদণ্ডে বিকল্পটি দেখতে হবে। এখান থেকে আপনি 1x, 2x বা 3x এ স্যুইচ করতে পারেন।

5. আপনি যখন পরীক্ষা করছেন তখন নিশ্চিত হয়ে নিন যে প্রতিবার আপনি পিক্সেল অনুপাত পরিবর্তন করবেন রিফ্রেশ বোতামটি hit আপনি যদি অনুপাতটি 2x এ সেট করে থাকেন এবং এটি আবার নিম্নে সেট করেন তবে আপনি কোনও পরিবর্তন দেখতে পাবেন না কারণ ব্রাউজারটি ইতিমধ্যে 2x বা তার বেশি সংখ্যক আনতে থাকলে 1x সম্পদ আনবে না।

Answer 8

আমি জানি না এটি খুব সাধারণ কিনা, আমি সিটিআরএল এবং স্ক্রোল টিপুন এবং এটি মিডিয়া ক্যোয়ারিকে ট্রিগার করে। আমি এটি বাগজিলায় যাচাই করেছি এবং এটি কাজ করে। আমি এসভিজি স্কেলিংটি অস্পষ্ট হিসাবে দেখায় তা সম্পর্কে নিশ্চিত নই, তবে এটি এসভিজি চিত্র।

Comments

আপনি কোন ব্রাউজার বা হার্ডওয়্যার ব্যবহার করছেন? আপনি কি বুগজিলার পরিবর্তে মোজিলা বোঝাচ্ছেন?

— মাইকেল ম্যাকগিনিস

Answer 9

আপনার যদি ম্যাক (বা ম্যাক ওএসএক্স ভার্চুয়াল মেশিন) থাকে তবে আপনি এক্সকোড সহ আইওএস এমুলেটরটি ব্যবহার করতে পারেন। এটি উইন্ডোটিকে দ্বিগুণ বড় করে তোলে, সুতরাং এটি বাস্তব জীবনে কীভাবে প্রদর্শিত হয় তা নয়, তবে আপনার চিত্রগুলি অস্পষ্ট বা না থাকলে স্পষ্টভাবে আপনাকে দেখাবে।

Comments

হ্যাঁ, এবং আপনি উইন্ডোজ একটি ভিএম হিসাবে ওএস এক্স চালাতে পারেন

— ফিল্টাহ

@ ফিল্টাহ আসলেই সবচেয়ে খারাপ পরামর্শ নয়

— পল

ছাড়া অ্যাপলের শুধুমাত্র লাইসেন্সিং অ্যাপল-ব্র্যান্ডেড হার্ডওয়্যার উপর ভার্চুয়াল মেশিনের পারেন।

— মাইকেল ম্যাকগিনিস