56 সংস্করণ থেকে শুরু করে অ্যান্ড্রয়েডে Chrome-এ URL বারের আকার পরিবর্তনের আচরণ পরিবর্তন হচ্ছে। এখানে আপনার যা জানা উচিত:
ভিউপোর্ট ইউনিটে সংজ্ঞায়িত দৈর্ঘ্য (অর্থাৎ vh ) URL বার দেখানো বা লুকানোর প্রতিক্রিয়াতে আকার পরিবর্তন করবে না। পরিবর্তে, vh ইউনিটগুলিকে ভিউপোর্টের উচ্চতায় আকার দেওয়া হবে যেন URL বারটি সর্বদা লুকানো থাকে। অর্থাৎ, vh ইউনিটকে "সবচেয়ে বড় সম্ভাব্য ভিউপোর্ট" এর আকার দেওয়া হবে। এর মানে হল 100vh দৃশ্যমান উচ্চতার চেয়ে বড় হবে যখন URL বার দেখানো হবে।
প্রাথমিক ধারণকারী ব্লক (ICB) হল রুট ধারণকারী ব্লক যা তাদের পিতামাতার সাপেক্ষে উপাদানের আকার দেওয়ার সময় ব্যবহৃত হয়। উদাহরণস্বরূপ, <html> উপাদানটিকে width: 100%; height: 100% এটিকে ICB-এর মতো একই আকার দেবে। এই পরিবর্তনের সাথে, ইউআরএল বার লুকানো অবস্থায় ICB আকার পরিবর্তন করবে না। পরিবর্তে, এটি একই উচ্চতা থাকবে, যেন ইউআরএল বারটি সর্বদা দেখা যাচ্ছে ("সাধারণতম ছোট ভিউপোর্ট")। এর মানে হল ইউআরএল বার লুকানো অবস্থায় ICB উচ্চতার আকারের একটি উপাদান দৃশ্যমান উচ্চতা সম্পূর্ণরূপে পূরণ করবে না।
উপরের পরিবর্তনগুলির জন্য একটি ব্যতিক্রম রয়েছে এবং সেটি হল উপাদানগুলির জন্য যেগুলি position: fixed । তাদের আচরণ অপরিবর্তিত থাকে। অর্থাৎ, একটি position: fixed এলিমেন্ট যার ব্লকটি ICB ধারণ করে URL বার দেখানো বা লুকানোর প্রতিক্রিয়াতে আকার পরিবর্তন করবে। উদাহরণস্বরূপ, যদি এর উচ্চতা 100% হয় তবে এটি সর্বদা ঠিক দৃশ্যমান উচ্চতা পূরণ করবে, URL বার দেখানো হোক বা না হোক। একইভাবে vh দৈর্ঘ্যের জন্য, তারা ইউআরএল বারের অবস্থানকে বিবেচনায় রেখে দৃশ্যমান উচ্চতার সাথে মেলে আকার পরিবর্তন করবে।
এই পরিবর্তনের কয়েকটি কারণ রয়েছে:
মোবাইলে ব্যবহারযোগ্য
vhইউনিট। এর আগে,vhইউনিট ব্যবহার করার অর্থ হল ব্যবহারকারী যখনই স্ক্রোলের দিক পরিবর্তন করে তখনই একটি পৃষ্ঠা ঝাঁকুনিতে রিফ্লো হবে।উন্নত ব্যবহারকারীর অভিজ্ঞতা। ব্যবহারকারী পড়ার সময় একটি পৃষ্ঠা পুনরায় প্রবাহিত হলে তারা নথিতে তাদের আপেক্ষিক অবস্থান হারাতে পারে। এটি হতাশাজনক কিন্তু অতিরিক্ত প্রসেসর ব্যবহার এবং ব্যাটারি ড্রেন পৃষ্ঠাটি রিলেআউট এবং পুনরায় রং করার জন্য দায়ী।
iOS-এ Safari-এর সাথে উন্নত আন্তঃব্যবহারযোগ্যতা। ওয়েব ডেভেলপারদের জীবনকে সহজ করে, সাফারি কীভাবে আচরণ করে তা নতুন মডেলের সাথে মেলে।
vhইউনিটকে সবচেয়ে বড় সম্ভাব্য ভিউপোর্ট বানানোর অজ্ঞাত পছন্দ কিন্তু আইসিবি সবচেয়ে ছোট সাফারির আচরণের সাথে মেলে।
পূর্ণ স্ক্রীন পরিস্থিতির জন্য, যেখানে URL বারটি লুকানো অবস্থায় লক করা থাকে, ICB পূর্ণ স্ক্রীনের উচ্চতা ব্যবহার করবে। এটি উপরের সংজ্ঞাগুলির সাথে সামঞ্জস্যপূর্ণ কারণ "ছোটতম সম্ভাব্য ভিউপোর্ট" সম্পূর্ণ ভিউপোর্ট হবে কারণ URL বারটি স্ক্রলে দেখায় না৷
ডেমো
- এখানে একটি বিক্ষোভ . পৃষ্ঠার ডানদিকে চারটি বার হল
99%,99vh,position:fixedএবংposition:absoluteএকটি স্ক্রোলযোগ্য পৃষ্ঠায় দেওয়া সমস্ত সম্ভাব্য সংমিশ্রণ। ইউআরএল বার লুকানো দেখায় কিভাবে এটি প্রতিটিকে প্রভাবিত করে। রিসাইজ ইভেন্ট পৃষ্ঠার নিচে প্রিন্ট করা হয়.
সমর্থন
- অ্যান্ড্রয়েডে Chrome 56।