সঙ্কুচিত থেকে ফিট ফিট ভিউপোর্ট মেটা অ্যাট্রিবিউটটি কী করবে?

Question

এর জন্য ডকুমেন্টেশন সন্ধান করতে আমার সমস্যা হচ্ছে। এটি কি সাফারি নির্দিষ্ট?

আইওএস 9 এ এখানে একটি বাগ ছিল ( এখানে ), সমাধানটি shrink-to-fit=noভিউপোর্টের মেটাতে যুক্ত করছে।

এই কোডটি কী করে?

Answer 1

এটি সাফারি নির্দিষ্ট, কমপক্ষে লেখার সময়, সাফারি 9.0 তে প্রবর্তিত হচ্ছে। "সাফারিতে নতুন কী?" সাফারি 9.0 এর জন্য ডকুমেন্টেশন :

ভিউপোর্টের পরিবর্তনসমূহ

"width=device-width"ভিউপোর্ট মেটা ট্যাগ ব্যবহার করে পৃষ্ঠাগুলি ভিউপোর্ট সীমানাকে উপচে ফেলে এমন সামগ্রীতে ফিট করে। আপনি "shrink-to-fit=no"নীচে দেখানো হিসাবে আপনার মেটা ট্যাগ যোগ করে এই আচরণটি ওভাররাইড করতে পারেন । যুক্ত মান পৃষ্ঠাটি ভিউপোর্টের সাথে মানিয়ে নিতে স্কেলিং থেকে আটকাবে।

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

সংক্ষেপে, এটিকে ভিউপোর্ট মেটা ট্যাগে যুক্ত করা পূর্ব-সাফারি 9.0 আচরণ পুনরুদ্ধার করে।

উদাহরণ

এখানে একটি কাজের ভিজ্যুয়াল উদাহরণ যা দুটি কনফিগারেশনে পৃষ্ঠাটি লোড করার সময় পার্থক্য দেখায়।

লাল বিভাগটি ভিউপোর্টের প্রস্থ এবং নীল বিভাগটি প্রাথমিক ভিউপোর্টের বাইরে অবস্থিত (যেমন left: 100vw)। প্রথম উদাহরণটিতে কীভাবে পৃষ্ঠাটি shrink-to-fit=noবাদ দেওয়া হবে তার জন্য উপযুক্তভাবে জুম করা হবে (এভাবে ভিউপোর্টের বাইরে থাকা সামগ্রীগুলি দেখানো হয়) এবং নীল সামগ্রীটি পরবর্তী উদাহরণে পর্দার বাইরে থাকে।

এই উদাহরণের কোডটি https://codepen.io/davidjb/pen/ENGqpv এ পাওয়া যাবে ।

সঙ্কুচিত-থেকে-ফিট নির্দিষ্ট না করে

সঙ্কুচিত থেকে ফিট = না

Comments

আমি দুঃখিত, কিন্তু আমি এখনও বুঝতে পারি না যে কোডটি কী করে। আপনি অন্যভাবে ব্যাখ্যা করতে পারেন? ধন্যবাদ!

— ড্যানিয়েল স্প্রিংগার

@ দানি ডিফল্টরূপে, সাফারি ভিউপোর্টকে উপচে পড়া যে কোনও সামগ্রীতে ফিট করার জন্য একটি পৃষ্ঠা জুম করবে (প্রথম উদাহরণটি নীল অঞ্চলটি দৃশ্যমান হিসাবে দেখায়; এটি উপচে পড়েছে)। shrink-to-fit=noজুম স্তরটি একা রেখে ওভারফ্লো প্রসারণটি অফ-স্ক্রিনে রেখে এই আচরণটি নির্দিষ্ট করে আপনার আইডিভাইস (বা আইওএস সিমুলেটর) এ কোডপেন উদাহরণ ব্যবহার করে সেটিংস পরিবর্তন করার চেষ্টা করুন। পরিবর্তনটি ইন্টারেক্টিভভাবে দেখে সহায়তা করবে।

— ডেভিডজবি

আহ আমি দেখি. তবে কেন কেউ চাইবেন যে তাদের সামগ্রীর কিছু অংশ ছোট পর্দায় লুকানো থাকবে?

— ড্যানিয়েল স্প্রিংগার

@ দানি বিভিন্ন কারণে, তবে দ্রুত উদাহরণগুলি স্লাইডার / কারাউজগুলি যা ভিউপোর্টের বাইরে সামগ্রী রেখে দেয় বা অন্যথায় বড় অ-প্রতিক্রিয়াশীল সামগ্রী (যেমন চিত্র / টেবিল) অন্যথায় উপচে পড়ে এবং বাকী পৃষ্ঠাটি ডিফল্টর সাথে ছোট হয়ে যায় shrink-to-fitআচরণ। এর সাথে shrink-to-fit=noপৃষ্ঠাটি প্রত্যাশিত আকারে থেকে যায়, সামগ্রীটি ভিউপোর্টকে উপচে ফেলে দেয়। কোনও ব্যবহারকারী ওভারফ্লো সামগ্রী দেখতে এখনও সাধারণভাবে (সাধারণত) স্ক্রোল বা জুম আউট করতে পারে তবে প্রাথমিক ভিউপোর্টটি ডিভাইসের আকারের সাথে মেলে।

— ডেভিডজবি

@ ডেভিডজেবি আমার ধারণা এটি সর্বশেষতম আইওএস ১১ দিয়ে স্থির হয়েছে আমি এই বাগটি পুনরুত্পাদন করতে পারছি না।

— জিল শাহ

Answer 2

আইওএস ব্যবহারের পরিসংখ্যান হিসাবে, ইঙ্গিত দেয় যে আইওএস 9.0-9.2.x ব্যবহার বর্তমানে 0.17% এ রয়েছে। যদি এই সংখ্যাগুলি সত্যই এই সংস্করণগুলির বিশ্বব্যাপী ব্যবহারের পরিচায়ক হয় তবে আপনার ভিউপোর্ট মেটা ট্যাগ থেকে সঙ্কুচিত-থেকে-ফিট মুছে ফেলা নিরাপদ হওয়ার সম্ভাবনা আরও বেশি।

9.2.x এর পরে আইওএস তার ব্রাউজারে এই ট্যাগ চেকটি সরিয়ে দেয়।

আপনি এই পৃষ্ঠাটি https://www.scottohara.me/blog/2018/12/11/shrink-to-fit.html দেখতে পারেন