কম্পিউটার টিউটোরিয়াল

iOS-এ ইনপুট এলিমেন্টে অটো জুম দ্রুত ডিজেবল করা

আপনি যদি সবচেয়ে কমন HTML ভিউপোর্ট মেটা সেটিংস ব্যবহার করেন, তবে ইনপুট এলিমেন্টে ক্লিক করলে iOS ডিভাইসে অটোমেটিক্যালি অটো জুম ট্রিগার হয়। কমপক্ষে স্মার্টফোনে। আমি iPhone 4, 5 এবং 6-এ টেস্ট করেছি, Safari এবং Chrome ব্রাউজার ব্যবহার করে। আমার রিসার্চ অনুযায়ী সব iOS ডিভাইসে একই।

এই HTML কোডটি অটো জুম ইফেক্ট হওয়ার অনুমতি দেয়:

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

কিন্তু এই অটো জুম ইফেক্ট সর্বদা ডিজাইরেবল নয়। কখনও কখনও এটি আপনার ওয়েব অ্যাপের ইউজেবিলিটি আহত করে। এটি সম্পূর্ণ কনটেক্সটের ওপর ডিপেন্ড করে।

Safari এবং Chrome উভয়েই এই ইফেক্ট ডিজেবল করতে আপনি নিচেরটি ব্যবহার করতে পারেন:

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

এখানে একমাত্র নতুন কোড হচ্ছে আমরা মেটা content অ্যাট্রিবিউটে maximum-scale=1 ভ্যালু যোগ করেছি।

গুরুত্বপূর্ণ

এটি ম্যানুয়ালি জুম ইন এবং আউট করার অপশন ডিজেবল করে না, Safari-এ। এটি শুধু অটো জুম ফাংশন ডিজেবল করে।

কিন্তু Chrome-এর মোবাইল ব্রাউজারে (iOS ডিভাইসে), এটি ম্যানুয়াল জুম অপশনও ডিজেবল করে। এটি আপনার ইউজ কেস অনুযায়ী সমস্যা হতে পারে।

আমি এখন পর্যন্ত কোনো পিউর HTML সমাধান খুঁজে পাইনি যা Chrome-এ ম্যানুয়াল জুম রাখতে দেয়। পেলে আপডেট করব।

একটি আরও সিম্পল সমাধান

আপনি যদি আপনার ইনপুট এলিমেন্টগুলোর মিনিমাম ফন্ট সাইজ ১৬px দেন, ডিফল্ট ১১px-এর বদলে, তবে এটি Safari এবং Chrome উভয়েই অটো জুম ইফেক্ট রিমুভ করবে। কমপক্ষে আমার টেস্টে এভাবে হয়েছিল।

এই মেথড দিয়ে আপনি maximum-scale-1 ভ্যালু কন্টেন্ট অ্যাট্রিবিউটে যোগ করার প্রয়োজন নেই এবং Chrome-এ ম্যানুয়াল জুম রেস্ট্রিক্ট হওয়া থেকে বাঁচতে পারেন।

রুকুন, আপনি এই সমাধানটি প্রথমে কেন সাজেস্ট করেননি?

খুব ভালো, আপনি হয়তো আপনার সব ইনপুট ফিল্ডে মোবাইলে ১৬px ফন্ট সাইজ ব্যবহার করতে চান না। এটি আপনাকে আপনার মোবাইল UI-এর টাইপোগ্রাফি অ্যাডাপ্ট করতে ফোর্স করবে ইনপুট ফিল্ডের জন্য।

প্রায় সবকিছুর মত, এই ইশ্যুও প্রোগ্রাম্যাটিক্যালি JavaScript দিয়ে ওয়ার্কঅরাউন্ড করা যায়, কিন্তু এই আর্টিকেলের স্কোপের বাইরে।

এছাড়া, সতর্ক থাকুন যে ব্যবহারকারীদের জুম করা রেস্ট্রিক্ট করা সাধারণত পরামর্শদাতা নয়। আরও ইনফো W3Schools-এ। কিন্তু আবার, এটি কনটেক্সটের ওপর ডিপেন্ড করে।

সর্বত্র ডিভাইসে একসাথে এই ইশ্যু সমাধান করার একটি সিম্পল সেটিং থাকলে ভালো হত। আপনি এই টপিকে কোনো ইনসাইট রাখলে কমেন্ট সেকশনে জানাতে পারেন :-)

  1. ওয়ার্ডপ্রেসে XML-RPC নিষ্ক্রিয় করা: যা জানা দরকার

  2. আইওএস ১২-এ ফেসটাইমে Live Photos, Animoji, এবং Stickers ইনেবল করুন: স্টেপ-বাই-স্টেপ গাইড

  3. আইওএস ১১-এ টু-ফ্যাক্টর অথেন্টিকেশন ইনেবল বা ডিজেবল করুন: ধাপ-ধাপ গাইড

  4. আইওএস ১১-এ হাই-এফিশিয়েন্স ইমেজ ফরম্যাট (HEIF) ডিজেবল করুন