আমি কীভাবে কোনও ডেস্কটপ ব্রাউজারে কোনও পৃষ্ঠার মোবাইল ভিউ খুলতে পারি?


49

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

আপনি কীভাবে কোনও ডেস্কটপ ব্রাউজার থেকে কোনও ওয়েবসাইটের মোবাইল ভিউ খুলতে পারেন?


23
"যেহেতু আমরা এখন একটি মোবাইল-প্রথম বিশ্বে আছি " ওহাহা সেখানে এক মিনিট ... প্রসঙ্গে রাজাদের there
মনিকার সাথে লাইটনেস রেস

3
শুধু একটি মন্তব্য - প্রসঙ্গটি সত্যই জানেন না, তবে যদি আমাকে প্রথমে মোবাইল ভিউতে আমার ডেস্কটপ / ল্যাপটপ থেকে ওয়েবপৃষ্ঠাগুলি খুলতে বলা হয় .... তবে ডেস্কটপটি ব্যবহার করার কী দরকার? আমি "উত্সাহ" দিয়ে আশা করি, আপনি এটি কোনও কোড বা অন্য পদ্ধতির মাধ্যমে জোর করছেন না। বিশেষত যেহেতু অনেকগুলি ওয়েবপৃষ্ঠাগুলি যা মোবাইলের জন্য ফর্ম্যাট করে তা বেশ কিছুটা নিচে রেখে দেওয়া হয় এবং এতে সম্পূর্ণ কার্যকারিতা নেই।
ব্রুস ওয়াইন

1
একটি পরিবর্তন ব্যবহারকারী এজেন্ট বা অনুরূপ এক্সটেনশন যুক্ত করুন বা আপনার ব্রাউজারে প্লাগ ইন করুন এবং একটি স্মার্ট ফোন ব্যবহারকারী এজেন্ট সেট করুন।
সালমান এ

1
"আমি লোকদের নিয়মিত তাদের ডেস্কটপ ব্রাউজারগুলি থেকে একটি মোবাইল ভিউতে ওয়েবসাইটগুলি খুলতে উত্সাহিত করতে চাই” "... এটি বোকামি। এবং যে সমস্ত ডেস্কটপ স্ক্রিন রিয়েল এস্টেট নষ্ট? ডেস্কটপ এবং মোবাইল উভয়েরই জায়গা রয়েছে এবং সে কারণেই প্রতিক্রিয়াশীল সমাধানগুলি বিকাশ করা হয়েছে। আসুন প্রতিটি ব্যবহারকারীর পক্ষে সর্বোত্তম অভিজ্ঞতা প্রদান করুন এবং লোকেরা তাদের পক্ষে সবচেয়ে আরামদায়ক ডিভাইসে ব্রাউজ করুন। যাইহোক, বৈধ প্রশ্ন, যেমন ওয়েব ডিজাইনার এবং বিকাশকারীদের সাইটগুলি তৈরি করার সময় একাধিক ডিভাইস অনুকরণ করা প্রয়োজন।
মানসিকবিদ

2
@ মেন্টালিস্ট আমার অর্থ এমন লোকেরা যারা ওয়েবসাইট এবং সোশ্যাল মিডিয়া অফারগুলিতে কাজ করছেন।
ফ্লিম

উত্তর:


91

ফায়ারফক্স:

  • উইন্ডোজ / লিনাক্স, প্রেস ইন Ctrl+ + Shift+ +M
  • ম্যাকোজে, option+ command+ টিপুনM

আপনি ("সরঞ্জাম"), "ওয়েব বিকাশকারী", "প্রতিক্রিয়াশীল নকশা মোড" এর অধীনে মেনু আইটেমটিও খুঁজে পেতে পারেন।

ক্রোম:

আপনার প্রথমে "বিকাশকারী সরঞ্জাম" খোলা থাকা দরকার:

  • উইন্ডোজ / লিনাক্সে, Ctrl+ Shift+ Iবা ঠিক চাপুনF12
  • ম্যাকোজে, option+ command+ টিপুনI

একবার বিকাশকারী সরঞ্জামগুলি খোলা এবং কেন্দ্রীভূত হয়ে গেলে আপনি ডিভাইস সরঞ্জামদণ্ডটি খুলতে পারেন:

  • উইন্ডোজ / লিনাক্স, প্রেস ইন Ctrl+ + Shift+ +M
  • ম্যাকোজে, command+ shift+ টিপুনM

আপনি বিকাশকারী সরঞ্জামগুলি ("আরও সরঞ্জাম", "ডিভেল্পিয়ার সরঞ্জাম") খোলার পরে মেনু আইটেমটি সন্ধান করতে পারেন এবং তারপরে একটি টেবিলের সামনে মোবাইল ফোনের মতো দেখতে আইকনটি ক্লিক করে "টগল ডিভাইস সরঞ্জামদণ্ড"।

সাফারি:

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

আপনি "বিকাশ", "প্রতিক্রিয়াশীল নকশা মোডে" ক্লিক করে মেনু আইটেমটি সন্ধান করতে পারেন। আপনি যদি "বিকাশ" মেনু আইটেমটি দেখতে না পান তবে আপনাকে "পছন্দসমূহ", "উন্নত" এবং "মেনু বারে বিকাশ মেনু প্রদর্শন করুন" টিক দিয়ে এটি সক্ষম করতে হবে।

এজ:

  • প্রেস F12ডেভেলপার টুলস খুলুন, এবং তারপর Ctrl+ + 7"এমুলেশন ট্যাব" খুলতে। আপনি অনুকরণ করতে চান এমন ডিভাইসটি কনফিগার করুন।

আপনি ওয়েবপৃষ্ঠায় ডান ক্লিক করে এবং "উপাদানটি পরীক্ষা করুন" চয়ন করে মাউস ব্যবহার করে বিকাশকারী সরঞ্জামগুলি খুলতে পারেন।


1
নোট করুন যে
সিআরটিএল

3
@ নারামসিম ধন্যবাদ এটি কেবল ক্রোমের ক্ষেত্রে প্রযোজ্য। আমি আমার উত্তর সম্পাদনা করেছি।
ফ্লিম

3
উইন্ডোজ / ক্রোমের জন্য, এফ 12 হ'ল দেব সরঞ্জামগুলিতে যাওয়ার সম্ভাব্য সহজ উপায় ... যদিও পরবর্তী কীস্ট্রোকটি যদি সিটিআরএল-শিফট-এম হতে চলেছে তবে আমি মনে করি যে সিটিআরএল-শিফট -1 দিয়ে শুরু করা আরও যুক্তিযুক্ত হতে পারে।
sǝɯɐſ

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

আপনি যদি কোনও মোবাইল পূর্বরূপ চান তবে ক্রোমের স্মরণ রয়েছে, তাই একবার এটি সক্ষম করে
পিটার ডি বি

11

ফ্লিমের উত্তর 100% সঠিক। শর্টকাটগুলি মনে রাখার ক্ষেত্রে কোনও ঝামেলা খুব বেশি হয়, ওয়েব ভিউ এবং মোবাইল / ট্যাবলেট ভিউয়ের মধ্যে টগল করার জন্য বিকাশকারী সরঞ্জামগুলির এই নীল বোতামটি:

ক্রৌমিয়াম

অথবা ফায়ারফক্স সহ:

ফায়ারফক্স

ডিভাইস সরঞ্জামদণ্ডটি সক্ষম করার পরে, আপনি ড্রপডাউন মেনু থেকে আপনার যে ডিভাইসটি অনুকরণ করতে চান তা বেছে নিতে পারেন।


1
প্রথম অংশটি কোন অংশে সফটওয়্যার ব্যবহার করে?
কামিল ম্যাকিয়েরোভস্কি

@ কামিলম্যাসিওরওস্কি ডেভটুলস হ'ল ক্রোম এবং অপেরা-তে পাওয়া বিকাশকারী সরঞ্জাম।
OptimusCrime

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

@ শোবিট গার্গটি কি সেই উইন্ডোজ, যা আমি সিটিআরএল + শিফট + সি টিপলে খোলে?
daniel.neumann

@ daniel.neumann দুর্ভাগ্যক্রমে আমি ম্যাক ব্যবহার করি, সুতরাং আপনি যখন এই কীগুলি টিপেন তখন কী হয় তা পরীক্ষা করে দেখতে পারি না। তবে উপরে উল্লিখিত শর্টকাটগুলি উল্লেখ করে, এই উইন্ডোটি ক্রোমের উপর "সিটিআরএল + শিফট + আই", ফায়ারফক্সে "সিআরটিএল + শিফট + এম" টিপে বা আইই / এজতে f12 টিপে খোলা উচিত।
শোভিত গার্গ

2

পরীক্ষার উদ্দেশ্যে, আমি নিম্নলিখিত ওয়েবসাইটগুলি ব্যবহার করি: -

  1. http://www.jamus.co.uk/demos/rwd-demonstrations/
  2. http://mattkersley.com/responsive/

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


1

আপনার ব্রাউজারে একটি "ব্যবহারকারী এজেন্ট স্যুইচার" এক্সটেনশান যুক্ত করুন এবং একটি মোবাইল ব্যবহারকারী এজেন্ট নির্দিষ্ট করুন। যদি ওয়েবসাইটটি যথেষ্ট স্মার্ট হয় তবে এটি আপনাকে মোবাইলের অনুকূলিত সংস্করণে পরিবেশন করবে।

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


1
এটি ভুল। মোবাইল লেআউটগুলি সিএসএস মিডিয়া ক্যোয়ারির মাধ্যমে ডিভাইস / স্ক্রিনের মাত্রার উপর ভিত্তি করে কাজ করা উচিত, ব্যবহারকারী এজেন্ট স্ট্রিং নয় - এটি আর 2006 নয়।
পাইএক্স06

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

1
@ পাইএক্স ০6 তারপর কোনও প্রচেষ্টা করার দরকার নেই। ব্রাউজার উইন্ডোটির আকার পরিবর্তন করুন!
সালমান এ

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

0

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

আমি সম্প্রতি আবিষ্কার করেছি একটি আরও আকর্ষণীয় সমাধান আছে: https://blisk.io/

আমি কোনও ব্যক্তিগত লাভের জন্য "প্রকারের" "অনুমোদিত লিঙ্ক" ব্যবহার করা থেকে বিরত থাকব (একটি "টোকেন ভিত্তিক সিস্টেম" রয়েছে যা দিয়ে আপনি বিনামূল্যে "দল ক্লাউড স্পেস" এবং "প্রিমিয়াম বৈশিষ্ট্যগুলি" এর মতো জিনিসগুলি পেতে ক্রেডিট অর্জন করতে পারেন এটি), তবে ব্লিস্ক আসলে বেশ সুন্দর।

এই ক্রোমিয়াম-ভিত্তিক "উন্নয়নের জন্য নির্মিত ব্রাউজার" বিভিন্ন ডিভাইসে পৃষ্ঠা বাম পাশে উল্লম্ব "ফলক" সহ ডেমো করার প্রচুর পরিমাণে সরবরাহ করে, যেমন আপনি Chrome বিকাশকারী সরঞ্জামগুলি ডান উল্লম্ব কলামে ডিফল্ট দেখতে পান see

এটা এক নজরে কাজ। যদিও এর "ফ্রিমিয়াম বর্ধিত কার্যকারিতা" এর কিছু সীমা রয়েছে, তবুও পাশাপাশি পাশাপাশি তুলনা করে আপনার পৃষ্ঠাগুলি / সাইটগুলির পিসি এবং মোবাইল উভয় সংস্করণ "প্রিভিউ" করতে খুব ভাল কাজ করে। আপনি যদি দূরবর্তী দলে কাজ করেন তবে প্রদত্ত বৈশিষ্ট্যগুলি বেশ রেড বলে মনে হচ্ছে (যদিও আমি ব্যক্তিগতভাবে মনে করি যে মাসিক ব্যয়ে লোককে ঝুঁকানোর আগে এটি আরও ভাল "টেস্ট ড্রাইভ" প্রোগ্রামের প্রয়োজন)।

সম্পূর্ণ প্রকাশ: মোবাইল প্রিভিউ অংশে প্রতিদিন একটি অত্যন্ত বিরক্তিকর "সময়সীমা" থাকে (অ্যাড্রেস বারের ডানদিকে আইকনটি খোলা / বন্ধ টোগল করে - ছোট লিঙ্ক-টু-দ্য-এ "ডিভাইস পূর্বরূপ" পরিবর্তন করুন উপরের ডানদিকে কোণায় মেনু "ডিভাইসের তালিকা দেখান")।

BliskDemoScreenshot

এছাড়াও: আমি ক্রোম / ফায়ারফক্স থেকে 2 টি পৃথক "ব্যবহারকারী-এজেন্ট স্যুইচার" এর মতো ব্রাউজার এক্সটেনশনের সাথে কয়েকটি সত্যই নিফটির কৌশল পেয়েছি যা আপনাকে বিভিন্ন অপারেটিং সিস্টেম এবং ব্রাউজারের ব্যবহারকারী-এজেন্ট স্ট্রিংগুলির মধ্যে টগল করে আরও কিছুটা এগিয়ে যেতে পারে AND তাদের জন্য ব্রাউজারগুলি।

আপনি পছন্দ করতে পারেন এমন কাস্টমাইজেশনের জন্য তালিকায় কাস্টম ইউজার-এজেন্ট স্ট্রিং যুক্ত করা কতটা সহজ তার কারণে আমি "এসোলিউশনস.স" গন্ধটি পছন্দ করি ( https: //chrome.google.com/webstore/detail/user-agent-switcher/clddifkhlkcojbojppdojfeeikdkgiae

যাইহোক, এটা আমার 2 সেন্ট। : P: P

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.