ব্রাউজারটি 400px এর নীচে স্কেল করে না?

Question

আমি তরল স্টাইল-শীট একসাথে রাখার বিষয়ে কাজ করছি এবং এটি দুর্দান্ত কাজ করে। একটি জিনিস আমি লক্ষ্য করেছি যে ক্রোমে আমার ব্রাউজার উইন্ডোটি 400px এর নীচে আকার পরিবর্তন করবে না এটি কেবল আটকে যায় এবং এফএফ-এ যখন আমি এটি স্কেল করি তখন এটি প্রায় 400px এ থামে এবং তার পরে একটি অনুভূমিক স্ক্রোল বারটি টপকে যায়।

আমি যখন আমার ফোনে সাইটটি খুলি তখন এটি প্রায় 320px থেকে নিখুঁত দেখায়, তাই আমি জানি এটি 400px এর চেয়ে কম স্কেল করে।

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

আবার ডেস্কটপে এটি ন্যূনতম প্রস্থের প্রায় 400px স্কেল করে স্টপ হয়ে যায়, তবে আমি যখন এটি আমার ফোনে খুলি তখন এটি ফোন স্ক্রিনের আকারের আকারে স্কেল করে যা প্রায় 320px হয় ... কৌতূহল কেন খুব কম সময়ে এটি জিতেছিল? ডেস্কটপে 320px এ স্কেল ডাউন নয়।

-অডিট- এছাড়াও আমি নিশ্চিত নই যে এই বিষয়টি নিয়ে কিন্তু অপেরা এটিকে কিছুটা কমিয়ে আনতে দেয় ... তাই এটি অপেরা নিয়ে কাজ করে, ক্রোম বা এফএফে নয় ... কোনও ধারণা?

Comments

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

— mrtsherman

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

— জেরেড ফারিশ

হ্যাঁ, আমি খুব নিশ্চিত যে এটি কেবল ব্রাউজার উইন্ডোটির নিজস্ব আক্ষরিক ন্যূনতম প্রস্থ, যেমন কোনও প্রোগ্রামের ন্যূনতম প্রস্থ থাকে এটি নিজেকে পুনরায় আকার দিতে দেয়। আমার ক্রোম 250px ভিউপোর্টের চেয়ে ছোট আকারের আকার পরিবর্তন করতে সক্ষম হবে না বলে মনে হয়।

— justisb

ক্রোম 33 এটিকে আবার 400px এ সেট করেছে

— স্পার্কআপ

"এটি আপনার সিএসএস এবং মার্কআপ সম্পর্কে সুনির্দিষ্ট কিছু হতে চলেছে" ... এহম না আসলে এটি ছিল না।

— স্টিজন ডি উইট

Answer 1

ক্রোম 400px (ওএস এক্স) বা 218px (উইন্ডোজ) এর নীচে অনুভূমিক আকারে পরিবর্তন করতে পারে না তবে আমার সমস্যার একটি সহজ সমাধান আছে:

1. ওয়েব ইন্সপেক্টরটিকে নীচের দিকে ডানদিকে ডক করুন
2. পরিদর্শক প্যানেলের আকার পরিবর্তন করুন - আপনি এখন ব্রাউজারের অঞ্চলটি সত্যিই ছোট করতে পারেন (নিচে 0 পিএক্স)

আপডেট: ডান দিকে ডক হওয়ার পরে ক্রোম আপনাকে এখন পরিদর্শক উইন্ডোগুলিকে উল্লম্বভাবে সাজানোর অনুমতি দেয়! এটি সত্যই লেআউটের উন্নতি করে।

এইচটিএমএল এবং সিএসএস প্যানেলগুলি খুব ভাল ফিট করে এবং আপনি এমনকি একটি ছোট কনসোল প্যানেলও খোলেন। এটি আমাকে ফায়ারফক্স / ফায়ারব্যাগ থেকে সম্পূর্ণ ক্রোমে স্থানান্তরিত করতে অনুমতি দিয়েছে।

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

আপডেট : এখানে আসার জন্য আরও একটি দুর্দান্ত সরঞ্জাম। http://lab.maltewassermann.com/viewport-resizer/

Comments

+1 পরিদর্শক

— এটির

তুমি আসল পুরুষ. এবং উপযুক্ত স্ক্রিনটি ডিবাগ করা আরও সহজ, যখন কোনও উপযুক্ত বড় পরিদর্শক-উইন্ডো থাকে।

— এবারসোল্ড

ধন্যবাদ মোবাইল @ লেবারগুলিতে কাজ করার সময় এটি একটি বড় বোনাস একটি দুর্দান্ত বোনাস পেয়েছে অ্যাবাবারস হ্যাঁ ধন্যবাদ

— isসিন ল্যাভারি

আইএমও এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। ধারণাটি সহজ এবং উজ্জ্বল এবং মেট্রিকের ওভাররাইডের উপরে আপনার ইঙ্গিতটি দুর্দান্ত। এবং তাই আপনি লিঙ্ক বুকমার্কলেট!

— মার্লার

বিকাশকারী সরঞ্জামগুলি ডকে কীভাবে ডেকে আনতে হবে তা অন্য কেউ বুঝতে পারেনি? stackoverflow.com/questions/10023640/...

— Erti-ক্রিস Eelmaa

Answer 2

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

আপডেট: 7/14/2013

---

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

Comments

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

— চামিকা সানডামাল

ক্রোমে সমস্ত অ্যাডন আইকনগুলি সরিয়ে ফেলা আমার পক্ষে এটি সমাধান করেনি। নয়ন 9 এর সমাধান করেছে।

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

এটি উত্তর নয় । এমনকি সমস্ত অ্যাডন / এক্সটেনশন অক্ষম করা থাকলেও ক্রোমের ন্যূনতম প্রস্থ এখনও 400px x

— isসিন লাভারি

@ ছামিকাসন্দমাল এটি সঠিক নয় OP এটি ক্রোমে অসম্ভব কারণ ব্রাউজারটির 400px এর কঠোর ন্যূনতম প্রস্থ রয়েছে। ওপি যে প্রভাবটির সন্ধান করছে তা অর্জনের একমাত্র উপায় হ'ল শেরপানৌতের উত্তর। আপনার উত্তর ব্যবহারকারীকে 400px এর শক্ত নূন্যতম প্রস্থের নিকটবর্তী হতে সহায়তা করার বাইরে একেবারে কিছুই করে না, যা ওপি সন্ধান করছে না।

— ফ্রেড স্টিভেনস-স্মিথ

@ ছামিকাসন্দমাল এটি আপনার পক্ষে কাজ করতে পারে, এটি আমাদের বাকি কাজ করছে না not এটা আপনার বিরুদ্ধে কিছুই না। কেবলমাত্র এই উত্তরটি আমাদের অনেকের জন্য সমস্যার সমাধান করে না।

— ডিএ

Answer 3

আমি পাশাপাশি স্টাম্পড কিন্তু একটি সহজ সমাধান দিয়ে শেষ। আমি একটি নতুন উইন্ডো খোলার জন্য একটি লিঙ্কটি সহ একটি এইচটিএমএল ফাইলটি তৈরি করেছি:

<a href="javascript:window.open('your_url_here', '','width=320,height=480')">Open!</a>

এই নতুন উইন্ডোতে অ্যাড্রেস বার ছাড়া কিছুই নেই এবং ক্রোম আমাকে নিখরচায় এটিকে 111x80 এ পুনরায় আকার দিতে দেয়।

Comments

LOL, একটি সাধারণ কাজ করতে একটি হ্যাক সম্পর্কে কথা বলুন

— অটো

Answer 4

নয়ান 9 এর সমাধানটি দুর্দান্ত কাজ করে এবং এইচটিএমএল ফাইল তৈরি না করে বুকমার্কে রাখা যেতে পারে। Chrome এ, URL সহ একটি নতুন বুকমার্ক তৈরি করুন:

javascript:(function(){window.open('ANY_URL', '','width=320,height=480');})();

এবং এটিকে "ওপেন ছোট উইন্ডো" বা এর মতো কোনও কিছুর নাম দিন। এটি আপনাকে ক্রোমের অভ্যন্তরে আকারের সীমাবদ্ধতা ছাড়াই উইন্ডো সহজেই খুলতে দেয়। মনে রাখবেন যে আপনার এড্রেস বারে এটি অনুলিপি করা কার্যকর হবে না - ক্রোম "জাভাস্ক্রিপ্ট:" আউট করে।

Comments

এই উত্তরটি আমার পক্ষে কাজ করেছিল। টুইটডেক যতটা সম্ভব ছোট আকারের করার জন্য দরকারী।

— ক্রুগ

Answer 5

আপনি যদি বিভিন্ন ডিভাইস অনুকরণ করতে আপনার পর্দার প্রস্থ হ্রাস করতে চান তবে (এবং কেন আপনি এটি করতে চান?):

ক্রোমের এখন তার পরিদর্শকটিতে একটি এমুলেশন বিভাগ রয়েছে, শীর্ষ মেনুবারে (ম্যাগনিফাইং গ্লাস এবং উপাদানগুলির মধ্যে) সামান্য ফোন আইকনটি ক্লিক করে সক্রিয় করা হয়েছে:

এমুলেশন মোড আপনাকে ইমপ্লুলেশন টাচ, ভূ-স্থান এবং এমনকি অ্যাক্সিলোমিটার ইনপুট এর মতো অন্যান্য দুর্দান্ত বৈশিষ্ট্যগুলির মধ্যে, সমস্ত সাধারণ মোবাইল স্ক্রিন আকারে ভিউপোর্টের আকার সেট করতে দেয়:

Comments

সবচেয়ে চিত্তাকর্ষক, আমি সেই বৈশিষ্ট্যটি সম্পর্কে জানতাম না ... অবশেষে আমি ব্যবহারকারী-এজেন্টের স্যুইচার থেকে মুক্তি পেতে পারি এবং সঠিকভাবে মোবাইল ডিভাইসগুলি অনুকরণ করতে পারি, আপনাকে ধন্যবাদ !! এটি +10

— এন্ড্রেসস

এই বৈশিষ্ট্যটি "টগল ডিভাইস সরঞ্জামদণ্ড" দ্বারা প্রতিস্থাপন করা হয়েছে stackoverflow.com/a/44194243/1175496

— দ্য রেড মটর

Answer 6

নয়ান 9 এবং ড্রিনেডেকাফ যা বলেছে তাতে যুক্ত করে আপনি কেবল ডকুমেন্টটি ফেলে দিতে পারেন URL ইউআরএল কলটিতে উইন্ডো.ওপেন আপনি বর্তমানে যে পৃষ্ঠাটি দেখছেন তা 320 উইন্ডোতে দেখতে পারেন। আপনি যদি স্ক্রোলবারের প্রত্যাশা করেন তবে আপনি প্রস্থে আরও কিছু যুক্ত করতে চাইবেন।

javascript:(function(){window.open(document.URL, '','width=320,height=480');})();

Answer 7

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

অনুকরণকারীগুলি খুলতে ডিভলটুলগুলি (টিপুন F12) টিপুন এবং তারপরে টগল করতে নিম্নলিখিত আইকনে ক্লিক করুন Device Toolbar:

এরপরে আপনি যে কোনও মোবাইল ডিভাইস বা ভিউপোর্টের আকার আপনি চান তা অনুকরণ করতে পারবেন।

Answer 8

ক্রোমে আপনার অ্যাডনগুলির আইকনগুলি উপরের ডানদিকে কোণায় সমস্যা সৃষ্টি করে

-> অ্যাড্রেস-বারের আকার পরিবর্তন করুন (যেখানে আপনি url টাইপ করেন) সর্বাধিক প্রস্থে (ডানদিকে ডান প্রান্তে বারটি টানুন)

বা আইকনগুলি অক্ষম করুন

Answer 9

আমি অলস, এটিকে আরও সহজ করার জন্য, বুকমার্কটি ব্যবহারকারীকে মাপের জন্য জিজ্ঞাসা করুন :-D

javascript: (function() {var width = prompt('Enter window width:', '320');var height = prompt('Enter window height:','480');var url = prompt('Enter window URL');if (url.indexOf(':') < 0) {url = 'http://'+url;} window.open(url, '','width='+width+',height='+height);})()

Answer 10

আমি এটির জন্য একটি দ্রুত কাজ খুঁজে পেয়েছি।

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

এখানে লিঙ্ক করুন: https://chrome.google.com/webstore/detail/responsive-web-design-tes/bdpelkpfhjfiacjeobkhlkkgaphbobea/ সম্পর্কিত

Answer 11

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

Answer 12

আর একটি সহজ সমাধান হ'ল ছদ্মবেশ মোডে প্রবেশের জন্য স্ট্রাগ + শিফট + এন ক্লিক করুন। আপনি নিজের ব্রাউজার উইন্ডোটিকে নিজের পছন্দ মতো আকার পরিবর্তন করতে পারেন।

Comments

ম্যাক 10.9 ক্রোমে 38.0.2125.104 তে এটি হয় না

— ভূতত্ত্ব

লিনাক্স ক্রোমিয়ামে 44.0.2403.89 এ ক্ষেত্রেও এটি হয় না

— ইকার পোহোরস্কি

উইন্ডোজ 8 ক্রোম সংস্করণ 74.0.3729.131 (অফিসিয়াল বিল্ড) (-৪-বিট) তেমনটি নয়

— দ্য রেড মটর

Answer 13

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

আমাকে এই সরঞ্জামগুলির একটি ব্যবহার করতে হয়েছিল কারণ উপরের উত্তরের সাথে আমি আমার উইন্ডোটি সঠিকভাবে 320 স্কেল করতে পারিনি, এই সরঞ্জামটি সামগ্রিকভাবে একটি দ্রুত সমাধান বলে মনে হচ্ছে।

http://lab.maltewassermann.com/viewport-resizer/

Answer 14

আমি সর্বদা পিনযুক্ত ট্যাবগুলি নিয়ে এই সমস্যাটিতে চলে আসছি। ক্রোম আটটি দৃশ্যমান পিনযুক্ত ট্যাবগুলির অনুভূমিক প্রস্থের নীচে আকার পরিবর্তন করবে না যদি সেখানে থাকে! এটি সমাধান করতে আপনি যে ট্যাবটি পুনরায় আকার দিতে চান তা কেবল আলাদা করুন ...

Answer 15

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

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

আপনার ব্রাউজার উইন্ডোটি একবার প্রতিক্রিয়াশীল বিন্যাস পরীক্ষার বিকল্পটি সক্রিয় হওয়ার পরে কীভাবে প্রদর্শিত হবে তার স্ক্রিন শট।

1. সাফারিতে বিকাশকারী মেনু কীভাবে সক্রিয় করবেন তার লিঙ্ক: https://coolestguidesontheplanet.com/safari-web-developer-tools-show-dock-browser-window/

Answer 16

জুমিং ব্যবহার করে অনেকগুলি স্মার্ট ফোন তাদের পর্দার আকারের সাথে ফিট করে scale আপনার সর্বনিম্ন পৃষ্ঠার প্রস্থ সম্ভবত 400px। কোনও উদাহরণ কোড ছাড়াই, আমি মনে করি কেবল এটিই বলা যায়।