100vh বিন্যাসে আইওএস ঠিকানা বারকে সম্বোধন করা

এটি কোনও বাগ নয়, এটি একটি বৈশিষ্ট্য।

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

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

কিছু গবেষণা করার পরে, আমি দেখতে পেলাম যে এটি "আইওএস ভিউপোর্টে স্ক্রল বাগ" নামে পরিচিত একটি সাধারণ অভিযোগ। ফেব্রুয়ারী ২০১৫ সালে, নিকোলাস হোইজি বুগজিলা ওয়েব কিটে বাগটি রিপোর্ট করেছিলেন যখন তিনি দেখতে পেলেন যে ব্রাউজার বোতামগুলির সাথে থাকা বারটি তার 100 ভিএইচ মোবাইল গেমটির নীচটি কেটে ফেলেছে। অ্যাপেলের প্রকৌশলী বেনজামিন পলাইন হোইজিকে উত্তর দিয়েছেন। তিনি ব্যাখ্যা করেছিলেন যে এটি কোনও ভুল নয়, একটি ফাংশন ছিল।

এটি সম্পূর্ণ উদ্দেশ্য। আমরা এই প্রভাবটি অর্জনে প্রচুর প্রচেষ্টা করেছি। :) মূল সমস্যাটি হ'ল স্ক্রল করার সময় দৃশ্যমান অঞ্চলটি পরিবর্তনশীলভাবে পরিবর্তিত হয়। আমরা যদি সেই অনুযায়ী সিএসএস ভিউপোর্টের উচ্চতা আপডেট করি তবে আমাদের স্ক্রোল করার সময় লেআউটটি আপডেট করতে হবে। এটি কেবল ছিঁটে যাওয়ার মতোই নয়, বেশিরভাগ সাইটগুলিতে এটি 60 এফপিএসে করা (60 টি এফপিএস আইওএসের বেসিক ফ্রেম রেট) এ করা কার্যত অসম্ভব। আপনাকে "ছিটে চেহারা" অংশটি দেখানো শক্ত, তবে কল্পনা করুন, আপনি যখন স্ক্রোল করবেন তখন সামগ্রীটি সরে যায় এবং আপনি পর্দায় যা দেখতে চান তা ক্রমাগত পরিবর্তন হয়। উচ্চতার গতিশীল আপডেট কাজ করে না। আমাদের বেশ কয়েকটি বিকল্প ছিল: আইওএসের ভিউপোর্ট ইউনিটগুলি মুছুন, আইওএস 8 এর আগের মতো নথির আকারটিকে পুনরায় আকার দিন, ছোট দর্শনীয় আকারটি ব্যবহার করুন, বড় আকারের আকার ব্যবহার করুন। আমাদের কাছে থাকা ডেটা থেকে বৃহত্তর দৃশ্যটি ব্যবহার করা ছিল সেরা আপোস। ভিউপোর্ট ইউনিট সহ বেশিরভাগ ওয়েবসাইট বেশিরভাগ সময় দুর্দান্ত দেখত।

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

সমাধান 1: সিএসএস মিডিয়া কোয়েরি

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

@ মিডিয়া সমস্ত এবং (ডিভাইসের প্রস্থ: 768px) এবং (ডিভাইসের উচ্চতা: 1024px) এবং (ওরিয়েন্টেশন: প্রতিকৃতি) f .ফু {উচ্চতা: 1024px; land} / * ল্যান্ডস্কেপ ফর্ম্যাট সহ আইপ্যাড। * / @ মিডিয়া সমস্ত এবং (ডিভাইসের প্রস্থ: 768px) এবং (ডিভাইসের উচ্চতা: 1024px) এবং (ওরিয়েন্টেশন: ল্যান্ডস্কেপ) {.ফু {উচ্চতা: 768px; }} / * আইফোন 5 আপনি দিক অনুপাত সহ ডিভাইসগুলিকেও লক্ষ্য করতে পারেন। * / @ মিডিয়া স্ক্রিন এবং (ডিভাইসের দিক অনুপাত: 40/71) {.ফু {উচ্চতা: 500px; }}

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

সমাধান 2: জাভাস্ক্রিপ্ট সহ অভ্যন্তরীণ উচ্চতায় প্রান্তিককরণ।

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

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

window.onresize = ফাংশন () {document.body.height = window.innerHeight; }
window.onresize (); // প্রথম উচ্চতা সেট করতে বলা হয়।

সমাধান 3: Div100vh প্রতিক্রিয়া উপাদান

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

এনপিএম ইনস্টল - সেভ বিক্রিয়া- Div-100vh

তারপরে উপাদানটি আমদানি করুন এবং এতে আপনার উপাদানগুলি মোড়ানো করুন:

'রিএ্যাক্ট-ডিভ-100vh' থেকে Div100vh আমদানি করুন;
কনস্ট মাইফুলস্ক্রিন কম্পোনেন্ট = () => ( আপনার জিনিস এখানে যান )

এবং চলুন!

এই বিভিন্ন সমাধান পরীক্ষার পরে, আমি বুঝতে পারি যে এই সমস্যার কোনও আকারের-ফিট-সব সমাধান নেই। সুতরাং আপনার ক্রস-ব্রাউজার এবং ক্রস-ডিভাইস পরীক্ষাগুলিতে সতর্ক থাকুন। এবং সম্ভবত আপনার মোবাইল ডিভাইসের জন্য vh / vw ডিভাইসগুলি পুরোপুরি ব্যবহার করা এড়ানো উচিত, কারণ এই ডিভাইসগুলির সাথে ত্রুটিপূর্ণ আচরণ মোবাইল ব্রাউজারগুলিতে ভালভাবে নথিভুক্ত।

এই সমাধানগুলি আপনার পক্ষে সহায়ক হয়ে উঠেছে এবং কোনটি সবচেয়ে ভাল কাজ করে তা আমাকে জানাবেন!