আমার প্রতিক্রিয়াশীল ওয়েবসাইট কাজ করছে না। ফিক্স: ভিউপোর্ট

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

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

কেন রেসপন্সিভ ডিজাইন কাজ করে না

একটি HTML ফাইলের হেডার থেকে কোডের একটি লাইন অনুপস্থিত হলে প্রতিক্রিয়াশীল ডিজাইন কাজ করা বন্ধ করে দেয়। কোডের এই একক লাইন অনুপস্থিত থাকলে, আপনার iPhone, Android, এবং অন্যান্য মোবাইল ডিভাইসগুলি ধরে নেবে যে আপনি যে ওয়েবসাইটটি দেখছেন সেটি একটি পূর্ণ-আকারের ডেস্কটপ সাইট এবং viewport এর আকার সামঞ্জস্য করুনপুরো স্ক্রীনকে ঘিরে রাখতে।

ভিউপোর্ট এবং ভিউপোর্ট সাইজ বলতে আপনি কি বোঝেন?

সমস্ত ডিভাইসে, ভিউপোর্টের আকার একটি ওয়েবপৃষ্ঠার এলাকার আকারকে বোঝায় যা বর্তমানে ব্যবহারকারীর কাছে দৃশ্যমান। কল্পনা করুন যে আপনি 320 পিক্সেল প্রস্থের একটি আইফোন 5 ধারণ করছেন। অন্যথায় স্পষ্টভাবে বলা না হলে, iPhones ধরে নেয় যে আপনি যে ওয়েবসাইট দেখেন তা হল একটি ডেস্কটপ সাইট যার প্রস্থ 980px।

এখন, আপনার কাল্পনিক iPhone 5 ব্যবহার করে, আপনি 800px চওড়া ডেস্কটপের জন্য ডিজাইন করা একটি ওয়েবসাইটে যান৷ এটির কোনো প্রতিক্রিয়াশীল লেআউট নেই, তাই আপনার iPhone পূর্ণ-প্রস্থ ডেস্কটপ সংস্করণ প্রদর্শন করে।

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

এটা ঠিক: তারা তাদের ডিসপ্লেতে পূর্ণ-প্রস্থের ওয়েবপৃষ্ঠাটি দেখছে কারণ iPhone ধরে নিয়েছে এটি ডিফল্ট আচরণ: এটি জুম আউট করা হয়েছে যাতে ব্যবহারকারী 980 পিক্সেল প্রস্থ পর্যন্ত একটি ওয়েবপৃষ্ঠা দেখতে পারে। অতএব, iPhone এর ভিউপোর্ট হল 980px।

আপনি জুম ইন বা আউট করার সাথে সাথে ভিউপোর্টের আকার পরিবর্তিত হয়। আমরা আগে বলেছিলাম যে আমাদের কাল্পনিক ওয়েবসাইটের প্রস্থ 800px, তাই আপনি যদি আপনার iPhone জুম করতে চান যাতে ওয়েবসাইটের প্রান্তগুলি আপনার iPhone এর ডিসপ্লের প্রান্তগুলিকে স্পর্শ করে, ভিউপোর্টটি 800px হবে। আইফোনের একটি ডেস্কটপ সাইটে 320px এর একটি ভিউপোর্ট থাকতে পারে, তবে এটি যদি করে থাকে তবে আপনি এটির একটি ছোট অংশই দেখতে পাবেন।

আমার রেসপন্সিভ ওয়েবসাইট নষ্ট হয়ে গেছে। আমি কিভাবে এটা ঠিক করব?

উত্তরটি হল এইচটিএমএল এর একটি একক লাইন যা একটি ওয়েবপৃষ্ঠার শিরোনামে ঢোকানোর সময় ডিভাইসটিকে তার নিজস্ব প্রস্থে (আইফোন 5 এর ক্ষেত্রে 320px) ভিউপোর্ট সেট করতে এবং স্কেল না করতে বলে। পৃষ্ঠাটি (বা জুম করুন)।

এই মেটা ট্যাগের সাথে সম্পর্কিত সমস্ত বিকল্পের আরও প্রযুক্তিগত আলোচনার জন্য, tutsplus.com-এ এই নিবন্ধটি দেখুন।

ওয়ার্ডপ্রেস এক্স থিম রেসপন্সিভ না হলে কিভাবে ঠিক করবেন

আগে থেকে আমার বন্ধুর কাছে ফিরে: সে যখন X থিম আপডেট করেছে তখন কোডের এই এক লাইনটি অদৃশ্য হয়ে গেছে। আপনারটি ঠিক করার সময়, মনে রাখবেন যে X থিমটি শুধুমাত্র একটি হেডার ফাইল ব্যবহার করে না - এটি প্রতিটি স্ট্যাকের জন্য বিভিন্ন হেডার ফাইল ব্যবহার করে, তাই আপনাকে আপনারটি সম্পাদনা করতে হবে৷

যেহেতু নিক এক্স থিমের ইথোস স্ট্যাক ব্যবহার করে, তাই তাকে হেডার ফাইলে আগে উল্লেখ করা কোডের লাইন যোগ করতে হয়েছিল যা x /frameworks/views/ethos/wp-header-এ অবস্থিত ছিল।php আপনি যদি একটি ভিন্ন স্ট্যাক ব্যবহার করেন, সঠিক হেডার ফাইলটি খুঁজে পেতে আপনার স্ট্যাকের নাম (সততা, পুনর্নবীকরণ ইত্যাদি) প্রতিস্থাপন করুন। যে এক লাইন ঢোকান, এবং voila! আপনি যেতে ভালো।

সুতরাং এটি আমার সিএসএস মিডিয়া প্রশ্নগুলিও ঠিক করে?

আপনি যখন আপনার HTML ফাইলের শিরোনামে সেই লাইনটি ঢোকাবেন, তখন আপনার প্রতিক্রিয়াশীল @media প্রশ্নগুলি হঠাৎ আবার কাজ করতে শুরু করবে এবং আপনার ওয়েবসাইটের মোবাইল সংস্করণটি আবার প্রাণবন্ত হয়ে উঠবে। পড়ার জন্য ধন্যবাদ এবং আমি আশা করি এটি সাহায্য করবে!

পেয়েট ফরোয়ার্ডকে মনে রাখবেন, ডেভিড পি.