কম্পিউটার

কীভাবে ইনপুট উপাদানগুলিতে অটো জুম দ্রুত নিষ্ক্রিয় করবেন (iOS)

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

এই HTML কোডটি স্বয়ংক্রিয় জুম প্রভাবকে ঘটতে দেয়:

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

কিন্তু এই স্বয়ংক্রিয় জুম প্রভাব সবসময় কাম্য থেকে দূরে. কখনও কখনও এটি আপনার ওয়েব অ্যাপের ব্যবহারযোগ্যতাকে ক্ষতিগ্রস্ত করবে। এটা সম্পূর্ণভাবে প্রেক্ষাপটের উপর নির্ভর করে।

সাফারি এবং ক্রোম উভয় ক্ষেত্রে এই প্রভাবটি নিষ্ক্রিয় করতে, আপনি পরিবর্তে নিম্নলিখিতগুলি ব্যবহার করতে পারেন:

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

একমাত্র নতুন কোড হল যে আমরা maximum-scale=1 মান যোগ করেছি মেটা content তে বৈশিষ্ট্য।

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

এটি ম্যানুয়ালি বিকল্পটি নিষ্ক্রিয় করে না সাফারিতে জুম ইন এবং আউট করা হচ্ছে। এটি শুধুমাত্র স্বয়ংক্রিয় জুম ফাংশন নিষ্ক্রিয় করে৷

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

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

অনেক সহজ সমাধান

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

এই পদ্ধতির সাহায্যে, আপনি আপনার সামগ্রীর বৈশিষ্ট্যে সর্বাধিক-স্কেল-1 মান যোগ করা এড়াতে পারেন এবং এইভাবে Chrome এ ম্যানুয়াল জুম সীমাবদ্ধ করা এড়াতে পারেন

অপেক্ষা করুন, কেন আপনি প্রথমে এই সমাধানটি প্রস্তাব করেননি?

ঠিক আছে, আপনি মোবাইলে আপনার সমস্ত ইনপুট ক্ষেত্রে একটি 16px ফন্ট সাইজ ব্যবহার করতে চান না। এটি আপনাকে আপনার ইনপুট ক্ষেত্রগুলিকে সামঞ্জস্য করার জন্য আপনার মোবাইল UI এর টাইপোগ্রাফি মানিয়ে নিতে বাধ্য করবে৷

এবং অনেক কিছুর মতো, এই সমস্যাটি জাভাস্ক্রিপ্ট ব্যবহার করে প্রোগ্রাম্যাটিকভাবে কাজ করা যেতে পারে, তবে এটি এই নিবন্ধের সুযোগের বাইরে।

এছাড়াও, সতর্ক থাকুন যে আপনার ব্যবহারকারীদের জুম করা থেকে সীমাবদ্ধ করার পরামর্শ দেওয়া হয় না। W3Schools এ আরও তথ্য। কিন্তু আবার, এটা প্রেক্ষাপটের উপর নির্ভর করে।

এটি চমৎকার হবে যদি একটি সাধারণ সেটিং থাকে যা একবারে সমস্ত ডিভাইস জুড়ে এই সমস্যাটির সমাধান করতে পারে। আপনার যদি এই বিষয়ে কোন অন্তর্দৃষ্টি থাকে, তাহলে নিচের মন্তব্য বিভাগে আমাকে নির্দ্বিধায় জানান :-)


  1. কীভাবে ওয়ার্ডপ্রেসে XML-RPC নিষ্ক্রিয় করবেন?

  2. আইওএস 12-এ কীভাবে ফেসটাইমে লাইভ ফটোগুলি সক্ষম, অক্ষম এবং তুলবেন?

  3. আইওএস 11 এ দ্বি-ফ্যাক্টর প্রমাণীকরণ কীভাবে সক্ষম বা নিষ্ক্রিয় করবেন

  4. আইওএস 11 এ কীভাবে উচ্চ দক্ষতার চিত্র বিন্যাস অক্ষম করবেন