প্রতিক্রিয়াশীল ওয়েবসাইটটি মোবাইলের সম্পূর্ণ প্রস্থে জুম হয়েছে

Question

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

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

আমি কি ভুল করছি কেউ কেউ ইঙ্গিত করতে পারে?

Answer 1

এটি আপনার HTML শিরোনামে যুক্ত করুন ..

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

এটি ছোট ডিভাইস ব্রাউজারগুলিকে কীভাবে পৃষ্ঠাটি স্কেল করবেন তা জানায়। আপনি এখানে এ সম্পর্কে আরও পড়তে পারেন: https://developer.apple.com/library/content/docamentation/AppleApplications/References/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Comments

আমি এই বিভাগটি প্রধান বিভাগে যুক্ত করেছি তবে এটি অ্যান্ড্রয়েডের আমার ডিফল্ট ইন্টারনেট এক্সপ্লোরারের জন্য কাজ করছে না আপনি যাচাই করতে পারেন - www.freerechargeapp.com/index.html

— সন্তোষ

আমি সত্যিই বুঝতে পারি না কেন আমার জন্য কাজ করছে না। একটি ওয়েবসাইটে কাজ করতে হয় এবং অন্য ওয়েবসাইটে কাজ করে না। এবং কোড স্ট্রাকচারটি তাজা বুটস্ট্র্যাপের সাথে একই

— bheatcoker

@ স্কেলি - অন্যান্য উত্তর আমি দেখেছি যা বাকি আছে maximum-scaleএবং এর 1.0পরিবর্তে ব্যবহার করেছি 1। আপনি কি জানেন যে এই জিনিসগুলি কোনও পার্থক্য করে?

— ওয়ানব্রি

তুমি আমাকে বাঁচিয়েছ :) ধন্যবাদ

— ফাতিহ

ধন্যবাদ দুই বছর পরে আপনার পোস্টটি এখনও শিজনিজল (sic।) 😎

— ওয়াল্ট

Answer 2

এখানে পরামর্শ http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

<meta name="viewport" content="initial-scale=1">

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

Comments

ধন্যবাদ, এটি আইফোনে স্কেলিংয়ের সমস্যাটি সমাধান করেছে এবং প্রতিকৃতি এবং ল্যান্ডস্কেপকে আলাদাভাবে (এবং সঠিকভাবে) প্রদর্শন করে।

— সেক্সএক্সলেটার

Answer 3

এই ত্রুটিটি অনুসন্ধানকারী লোকদের জন্য এটি যুক্ত করা হচ্ছে যার জন্য গৃহীত উত্তর কাজ করছে না। আমি বিশ্বাস করি এটি বিরল, তবে তবু হতাশার ক্ষেত্রে হবে:

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

Answer 4

আপনার ব্রাউজারের ক্যাশে সাফ করার চেষ্টা করুন এবং একটি তাজা ট্যাবে পৃষ্ঠাটি খুলুন। এটি কখনও কখনও যখনই ঘটে তখন বিষয়টি আমার জন্য সমাধান করে।