আমি কীভাবে একটি মোবাইল ওয়েব পৃষ্ঠায় জুম "অক্ষম" করতে পারি?

Question

আমি একটি মোবাইল ওয়েব পৃষ্ঠা তৈরি করছি যা মূলত বেশ কয়েকটি পাঠ্য ইনপুট সহ একটি বড় ফর্ম।

তবে (কমপক্ষে আমার অ্যান্ড্রয়েড সেলফোনে), প্রতিবার আমি যখন কোনও ইনপুটটিতে ক্লিক করি তখন পুরো পৃষ্ঠাটি সেখানে জুম করে বাকী পৃষ্ঠাটি অস্পষ্ট করে রাখে। ভঙ্গুর ওয়েব পৃষ্ঠাগুলিতে এই জাতীয় জুম অক্ষম করার জন্য কি এইচটিএমএল বা সিএসএস আদেশ আছে?

Comments

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

— tomasz86

আমি সম্মত হই যে এটি বেশিরভাগ সাইটের জন্য অক্ষম করা উচিত নয়, তবে এমন কিছু ব্যবহারের ক্ষেত্রে রয়েছে যেখানে আপনি ডিফল্ট জুমিং অক্ষম করতে চাইতে পারেন - যেমন মোবাইল ওয়েব গেমস যেখানে আপনি অন্য কিছু করতে জুমকে ওভাররাইড করতে চাইতে পারেন।

— লুক

আপনি করবেন না - ব্যবহারকারীরা যদি জুম করতে চান তবে তাদের এটি করতে দিন। এছাড়াও: আপনার অনুরোধটি উপেক্ষা করার জন্য ক্রোমের একটি বিকল্প রয়েছে।

— মার্টিন

অ্যান্ড্রয়েড ফায়ারফক্স ব্যবহারকারীদের জন্য ফায়ারফক্স অ্যাড- অনের জন্য সর্বদা জুম রয়েছে। অত্যন্ত বাঞ্ছনীয়.

— কলিন ডি বেনেট

আইওএস 10 থেকে , user-scalable=noউপেক্ষা করা হবে। দেখুন এই

— Raptor

Answer 1

এটি আপনার প্রয়োজনীয় সমস্ত কিছু হওয়া উচিত

<meta 
     name='viewport' 
     content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' 
/>

Comments

এটি সাধারণভাবে জুম করার ব্যবহারকারীর ক্ষমতাও অক্ষম করে, পাশাপাশি পৃষ্ঠাটি ভিউপোর্টে ফিট করে এমনভাবে স্বয়ংক্রিয়ভাবে সামঞ্জস্য করার ব্রাউজারের ক্ষমতা - সমস্ত মার্টিন সন্ধান করছে 'জুম-অন-ইনপুট-ক্লিক' অক্ষম করার একটি উপায় আচরণ।

— ম্যাট লোহক্যাম্প

এই মুহুর্তে পোস্টারাসের কেউ এই কাজটি করেছেন, 12px এ ফন্ট থাকার সময় এটি অপঠনযোগ্য এবং আমি এর আশেপাশে কোনও উপায় খুঁজে পাচ্ছি না।

— এমিল ইভানভ

নিজেকে সহ প্রত্যেক দৃষ্টি প্রতিবন্ধী ব্যক্তি এটিকে যে কোনও কিছুর চেয়ে বেশি ঘৃণা করেন। আমাকে এমন পৃষ্ঠাগুলির স্ক্রিন গ্র্যাব নিতে হবে এবং তারপরে চিত্র দর্শকের মধ্যে এটি জুম করে।

— জ্যাক মার্কেটি

দ্বিতীয় মেটা ট্যাগ কি করে? নন width=device-widthইতিমধ্যে প্রথম মেটা ট্যাগে?

— লুক

এটি আইওএস-এ কাজ করছে বলে মনে হচ্ছে না l. lukad03 উত্তর দেখুন

— স্পষ্টত

Answer 2

আপনারা পার্টিতে দেরি করেছেন, কেজিগ্রোটারিজের উত্তর আমার পক্ষে কাজ করে না এবং বেনি নিউজবাউরের জবাবটিতে টার্গেট-ডেনসিটিডিপি (একটি বৈশিষ্ট্য যা অবমূল্যায়ন করা হচ্ছে ) অন্তর্ভুক্ত।

এটি তবে আমার পক্ষে কাজ করে:

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

Comments

এটি এখন সঠিক উত্তর। অন্যান্য উত্তরগুলি আর কাজ করে না (অন্তত আইওএস 7 এর জন্য)।

— কাইলফারিস

আইওএস ১০.০ এ যে কেউ এটি ব্যবহার করে দেখেছি বলে মনে হয়না এটি কাজ করছে?

— জেএম্যাক

আমার জন্য কাজ করে না। এটি স্ক্রোলবার এবং খারাপ জুম সহ সমস্ত স্ক্রিনকে পুনরায় আকার দিয়েছে।

— কোকরিকো

অ্যাপলে এসএফবি ইস্যুর কারণে এখনও সাফারি / আইওএস 11 এ কাজ করছে না।

— 15ee8f99-57ff-4f92-890c-b56153

Answer 3

এখানে অনেকগুলি পন্থা রয়েছে- এবং অবস্থানটি হ'ল সাধারণত অ্যাক্সেসযোগ্যতার উদ্দেশ্যে জুম করার ক্ষেত্রে ব্যবহারকারীদের সীমাবদ্ধ করা উচিত নয় , যেখানে এটির প্রয়োজন সেখানে ঘটনাগুলি থাকতে পারে:

ডিভাইসের প্রস্থে পৃষ্ঠাটি রেন্ডার করুন, স্কেল না:

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

স্কেলিং- প্রতিরোধ করুন এবং ব্যবহারকারীকে জুম করতে সক্ষম হওয়া থেকে বিরত করুন:

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

সমস্ত জুমিং, সমস্ত স্কেলিং অপসারণ করা হচ্ছে

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

Comments

"সাধারণত ব্যবহারকারীদের সীমাবদ্ধ করা উচিত নয়" তবে মোবাইলের জন্য ওয়েব অ্যাপ্লিকেশন বিকাশ করার সময় আপনাকে প্রায়শই "ইনপুট ফোকাসে জুম-ইন" মোকাবেলা করতে হয়। সেক্ষেত্রে জুমিং অক্ষম করা আমার পক্ষে সহায়ক বলে মনে হচ্ছে।

— Le 'nton

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

— পিএফজি

Answer 4

তুমি ব্যবহার করতে পার:

<head>
  <meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, user-scalable=no" />
  ...
</head>

তবে দয়া করে নোট করুন যে অ্যান্ড্রয়েড ৪.৪ এর সাথে সম্পত্তি টার্গেট-ঘনত্বের ডিপিআই আর সমর্থিত নয় । সুতরাং অ্যান্ড্রয়েড ৪.৪ এর জন্য এবং পরে নিম্নলিখিতটি সেরা অনুশীলন হিসাবে প্রস্তাবিত:

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

Answer 5

যেহেতু প্রাথমিক সমস্যার সমাধান এখনও নেই, তাই এখানে আমার খাঁটি সিএসএস দুটি সেন্ট রয়েছে।

মোবাইল ব্রাউজারগুলি (তাদের বেশিরভাগের) ইনপুটগুলিতে ফন্ট-আকারের 16px হওয়া দরকার। সুতরাং

input[type="text"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  font-size: 16px;
}

বিষয়টি সমাধান করে সুতরাং আপনার নিজের সাইটের জুম এবং আলগা অ্যাক্সেসযোগ্যতার বৈশিষ্ট্যগুলি অক্ষম করার দরকার নেই।

যদি আপনার বেস ফন্ট-আকারটি মোবাইলগুলিতে 16px না হয় বা 16px না হয়, আপনি মিডিয়া ক্যোয়ারী ব্যবহার করতে পারেন।

@media screen and (max-width: 767px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    font-size: 16px;
  }
}

Comments

এই সমাধানটিতে এত কম ভোট কেন? এটি ফর্ম-ক্লিক জুমিং এড়ানোর সর্বোত্তম উপায় way

— ক্লাউসসিপিএইচ

হ্যাঁ; এটি আমার সমস্যাও সমাধান করে! আমি জুমিং পুরোপুরি অক্ষম করতে চাইনি এবং এটি আমার প্রয়োজন ছিল।

— ব্রেন্ডন

আপনি font-size: 1remপুরো পৃষ্ঠার জন্যও সেট করতে পারেন , তাই ফন্টটি সুন্দরভাবে স্কেল করে, একই সাথে "ফোকাস-অন-জুম" সমস্যা এড়ানো।

— itachi

Answer 6

এই মেটা ট্যাগ এবং শৈলী যোগ করার চেষ্টা করুন

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


<style>
body{
        touch-action: manipulation;
    }
</style>

Comments

- ডেভেলপার.মোজিলা.আর.touch-actionnone

— ইউএস

আমার জন্য @ rahulroy9202 touch-action: manipulation;ভাল কাজ করেছে। touch-action: none;কিছুই

— করেনি

ধন্যবাদ আমার জন্য ভাল কাজ করেছে।

— আরিফ মুস্তফা

Answer 7

দেখে মনে হচ্ছে কেবল সূচি html এ মেটা ট্যাগ যুক্ত করা পৃষ্ঠা জুম করা থেকে বাধা দেয় না। নীচের স্টাইল যুক্ত করা যাদু করবে will

:root {
  touch-action: pan-x pan-y;
  height: 100% 
}

সম্পাদনা: ডেমো: https://no-mobile-zoom.stackblitz.io

Comments

এটি স্থির হিসাবে গ্রহণ করা উচিত, এছাড়াও মোবাইল সাফারি আইওএস 13 এটিএম

— ম্যাজিকো

এটি মোবাইল থেকে প্রত্যাশার মতো কাজ করছে, ধন্যবাদ! এখানে চেক proyecto26.com/animatable-component

— jdnichollsc

Answer 8

ওয়েব অ্যাপ্লিকেশনগুলির সম্ভাব্য সমাধান: জুমিংটি আর আইওএস সাফারিতে অক্ষম করা যায় না, হোম স্ক্রিন শর্টকাট থেকে সাইটটি খোলার সময় এটি অক্ষম করা হবে।

আপনার অ্যাপ্লিকেশনটিকে "ওয়েব অ্যাপ্লিকেশন সক্ষম" হিসাবে ঘোষণা করতে এই মেটা ট্যাগ যুক্ত করুন:

    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
    <meta name='apple-mobile-web-app-capable' content='yes' />

তবে কেবলমাত্র এই বৈশিষ্ট্যটি ব্যবহার করুন যদি আপনার অ্যাপ্লিকেশন স্ব-টেকসই হয় তবে ভাগ করার বিকল্পগুলি অক্ষম থাকায় ফরওয়ার্ড / পশ্চাদপদ বোতাম এবং ইউআরএল বার হিসাবে হিসাবে থাকে। (আপনি এখনও বাম এবং ডানদিকে সোয়াইপ করতে পারেন) তবে এই পদ্ধতিটি ইউএক্সের মতো বেশিরভাগ অ্যাপ্লিকেশনটিকে সক্ষম করে। পুরো স্ক্রীন ব্রাউজারটি কেবল তখনই শুরু হয় যখন সাইটটি হোমস্ক্রীন থেকে লোড করা হয়। আমি আমার রুট ফোল্ডারে একটি আপেল-টাচ-আইকন-180x180.png অন্তর্ভুক্ত করার পরেও এটি কাজ করতে পেরেছি।

বোনাস হিসাবে, আপনি সম্ভবত এই পাশাপাশি একটি বৈকল্পিক অন্তর্ভুক্ত করতে চান:

<meta name='apple-mobile-web-app-status-bar-style' content='black-translucent'/>

Answer 9

নিম্নলিখিত 'মেটা' উপাদানটি আপনার 'মাথায়' কেবল যুক্ত করে আপনি কাজটি সম্পাদন করতে পারেন:

<meta name="viewport" content="user-scalable=no">

'প্রস্থ', 'প্রাথমিক-স্কেল', 'সর্বাধিক-প্রস্থ', 'সর্বাধিক-স্কেল' এর মতো সমস্ত বৈশিষ্ট্য যুক্ত করা কাজ নাও করতে পারে। অতএব, কেবল উপরের উপাদানটি যুক্ত করুন।

Answer 10

<script type="text/javascript">
document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });
</script>

চিমটি অক্ষম করতে স্ক্রিপ্টটি যুক্ত করুন, জুমকে ফোকাস করুন tap