ইনপুট "পাঠ্য" ট্যাগটিতে অটো জুম অক্ষম করুন - আইফোনে সাফারি

Question

আমি একটি HTML পৃষ্ঠা তৈরি করেছি যার <input>সাথে ট্যাগ রয়েছে type="text"। আমি যখন আইফোনটিতে সাফারি ব্যবহার করে এটিতে ক্লিক করি তখন পৃষ্ঠাটি বড় হয় (অটো জুম)। কেউ কীভাবে এটি অক্ষম করতে জানেন?

Comments

সমস্ত টুইটার বুটস্ট্র্যাপ ব্যবহারকারীদের এখানে অবতরণ করার জন্য: এই গিথুব সমস্যাটিও দেখুন ।

— জেরোইন

আমি মনে করি @ ড্যাক্সম্যাক্রোগ ঠিক কী উত্তর চান তার উত্তর দেয়, আপনি কি এটি গ্রহণ করতে রাজি হন যাতে এটি শীর্ষে উঠে যায় এবং এই সমস্ত মাধ্যমে পড়া লোকজনের কাছ থেকে প্রচুর পুনর্নির্মাণকে বাঁচাতে পারে? 2018 উত্তরঃ stackoverflow.com/a/46254706/172651

— অভিব্যক্ত

@ ব্রেক অ্যান্ড্রয়েড চিম্টি এবং জুম কার্যকারিতা সম্পর্কে আপনি যে উত্তরটি দিয়েছিলেন তা ইমেল করুন olve daxmacrog উত্তর ত্রুটিযুক্ত।

— এমএইচ

আমি শপথ করছি, অ্যাপল কেবল আমাদের মাথা গণ্ডগোলের জন্য এই অ্যান্টি-ফিচারগুলি তৈরি করে।

— অ্যান্ড্রু কোস্টার

@ অ্যান্ড্রুকোস্টার, আমি এখন থেকে আপনার সাথে 2020 সালেও একমত।

— অশোক

Answer 1

ফন্টের আকারের চেয়ে কম 16pxএবং ফর্ম উপাদানগুলির জন্য ডিফল্ট ফন্ট-আকার 11px(কমপক্ষে ক্রোম এবং সাফারিতে) থাকলে ব্রাউজারটি জুম করবে ।

অতিরিক্তভাবে, selectউপাদানটির focusছদ্ম-শ্রেণি সংযুক্ত থাকা দরকার।

input[type="color"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="email"],
input[type="month"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="text"],
input[type="time"],
input[type="url"],
input[type="week"],
select:focus,
textarea {
  font-size: 16px;
}

এটা সর্বোপরি ব্যবহার করার জন্য প্রয়োজনীয় নয় আপনি শুধু শৈলী উপাদান আপনার যা দরকার পারেন, যেমন: শুধু text, numberআর textarea:

input[type='text'],
input[type='number'],
textarea {
  font-size: 16px;
}

ইনপুট উপাদানগুলি পিতামাতার স্টাইল থেকে উত্তরাধিকারী করার বিকল্প বিকল্প:

body {
  font-size: 16px;
}
input[type="text"] {
  font-size: inherit;
}

Comments

কেবল সমস্ত কিছু আচ্ছাদন করার জন্য: select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"] { font-size: 16px; }

— নিক বার্বিয়ার

@Nic আপনার ব্যবহার করা প্রয়োজন select:focus। একই সমস্যা ছিল।

— ডিজিজস

আমি বুঝতে পারছি না, এটা ঠিক কিভাবে? আমি যদি আরও ছোট / বড় ফন্টের আকার চাই?

— ব্রায়ান

যথাযথ উপায় হ'ল মেটা ট্যাগ এতে পরিবর্তন করুন: <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1, সর্বাধিক স্কেল = 1, ব্যবহারকারীর স্কেলেবল = 0" />

— মিলোস ম্যাটিক

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

— BadHorsie

Answer 2

জুম চিমটি ব্যবহারকারীর ক্ষমতা অক্ষম না করে আপনি সাফারিটিকে ব্যবহারকারী ইনপুট চলাকালীন পাঠ্য ক্ষেত্রগুলিতে স্বয়ংক্রিয়ভাবে জুম করা থেকে বিরত রাখতে পারেন । কেবল যুক্ত করুন maximum-scale=1তবে অন্যান্য উত্তরে প্রস্তাবিত ব্যবহারকারী-স্কেল বিশিষ্টতাটি ছেড়ে দিন।

জুম করা থাকলে আপনার চারপাশে “ভাসমান” লেয়ারে এমন একটি ফর্ম থাকলে এটি গুরুত্বপূর্ণ সার্থক বিকল্প which

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

Comments

এটি 2018+ সমাধান। আপনার জীবন এটি উপর নির্ভর করে যেমন উত্সাহিত।

— হেনরিক পেটারসন

এটি অ্যান্ড্রয়েড ডিভাইসগুলিকে জুম করার ক্ষমতাটি ভেঙে দেবে

— fen1ksss

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

— fen1ksss

@ হেনরিকপেটারসন এটি ওপি দ্বারা নির্দিষ্ট হিসাবে অটো-জুম অক্ষম করার চেয়ে আরও বেশি কিছু করে, এটি চিমটি জুম অক্ষম করে। সুতরাং আমি মনে করি না এটি 2018+ এর সমাধান।

— আন্দ্রে ওয়ার্ল্যাং

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

— daxmacrog

Answer 3

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select:focus,
  textarea:focus,
  input:focus {
    font-size: 16px;
    background: #eee;
  }
}

নতুন: আপনি ফোকাস ছাড়াই ইনপুটটিতে 16px ব্যবহার না করে আইওএস এখনও জুম করবে।

@media screen and (-webkit-min-device-pixel-ratio:0) { 
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

আমি একটি ব্যাকগ্রাউন্ড যুক্ত করেছি যেহেতু আইওএস নির্বাচন করতে কোনও পটভূমি যুক্ত করে না।

Comments

এটি কেবল iOS (আইফোন / আইপ্যাড / আইপড) এ সাফারি নয়, সাফারি / ওএসএক্স এবং ক্রোম (উইন্ডোজ এবং ম্যাক) -এও কাজ করে। সুতরাং আপনি যদি আইফোনটি নির্দিষ্টভাবে লক্ষ্য করার চেষ্টা করছেন তবে এটি কার্যকর হবে না।

— রেডটোপিয়া

সবাই কেন 16px বলছে তবে কেউ কেন এটি 16px সঠিকভাবে তা উল্লেখ করার জন্য মাথা ঘামায় না? এ জাতীয় নির্বিচার নম্বর কেন? কেন আমাদের ফর্ম ক্ষেত্রের পাঠ্য আকার 16px এ সেট করতে হবে এবং না .. বলুন 1.8 রেম বা 2.5 মিম বা এ জাতীয়? এটি কি কোনও মালিকানাধীন ওএস থেকে বোকা বাগ?

— মৌমাছি

@ বিবি 100% হরফ আকার 16px, যে সমস্ত ব্রাউজার না হলে বেশিরভাগের জন্য ডিফল্ট (ডেস্কটপও)) আইওএস এটি ব্যবহার করে এটি ডিফল্ট হিসাবে সম্ভবত এটি পড়ার জন্য একটি আরামদায়ক আকার। কেন এটি এইভাবে সেট করা আছে আমি সন্ধান করতে বিরক্ত করিনি, যত্ন নেই।

— ক্রিস্টিনা

আইফোনটিতে @media screen and (-webkit-min-device-pixel-ratio:0) and (max-device-width:1024px)প্রভাব সীমাবদ্ধ করতে ব্যবহার করুন , তবে ক্রোমে দেখার সময় ওয়েবসাইটগুলি পরিবর্তন করবেন না।

— বার্নিনলিও

একটি মিডিয়া ক্যোয়ারী ব্যবহার না করে, আপনার ব্যবহার করা উচিত @supports (-webkit-overflow-scrolling: touch), কারণ এই CSS বৈশিষ্ট্যটি কেবল আইওএস

— জেমস মুরান

Answer 4

যদি আপনার ওয়েবসাইটটি কোনও মোবাইল ডিভাইসের জন্য যথাযথভাবে ডিজাইন করা হয় তবে আপনি স্কেলিংকে অনুমতি না দেওয়ার সিদ্ধান্ত নিতে পারেন।

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

এটি আপনার মোবাইল পৃষ্ঠা বা ফর্মটি প্রায় 'ভাসমান' করতে চলেছে এমন সমস্যার সমাধান করে।

Comments

প্রযুক্তিগতভাবে সঠিক, তবে আমি যুক্তির সাথে একমত নই। সঠিকভাবে ডিজাইন করা সাইটটিতে ব্যবহারকারী জুমগুলি অক্ষম করা সাধারণত এখনও একটি খারাপ ধারণা।

— Fer

"যথাযথভাবে ডিজাইন করা" খুব সাবজেক্টিভ। কোনও সাইটের শীর্ষে একটি স্থির, 50px শিরোনাম বিবেচনা করুন যা সম্পূর্ণ প্রতিক্রিয়াশীল এবং সমস্ত ব্রাউজারে কাজ করা উচিত। আইওএস সাফারিতে জুম করা শিরোনামের অবস্থানটি ভেঙে দেয় এবং পুরো সাইটটিকে প্রায় ভেঙে দেয়।

— রেডটোপিয়া

ব্যবহারকারী জুম সক্ষমতা অক্ষম করা একটি ইউএক্স দৃষ্টিকোণ থেকে একটি ভয়ানক অনুশীলন এবং সত্যই যে কোনও মূল্যে এড়ানো উচিত। অবাধে জুম করতে সক্ষম হওয়াই একটি প্রাথমিক অ্যাক্সেসিবিলিটি বৈশিষ্ট্য এবং এমন একটি নিয়ন্ত্রণ যা আপনাকে ব্যবহারকারীর কাছ থেকে কখনই দূরে সরিয়ে নেওয়া উচিত নয়।

— গ্যাব্রিয়েল লুথজে

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

— জোতাভ

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

— রায়ান উইলিয়ামস

Answer 5

সংক্ষেপে উত্তরটি হ'ল: ফর্ম উপাদানগুলির ফন্টের আকারটি কমপক্ষে 16px এ সেট করুন

Comments

হ্যাঁ, মোবাইল ডিভাইসগুলিতে জুম করা এড়াতে এটি অবশ্যই সর্বোত্তম অনুশীলন । কোনও জেএস, কোনও হ্যাকস, কোনও কাজই নয়। তবে 16px দিয়েও আমি আমার পৃষ্ঠাগুলিতে খুব সামান্য জুম লক্ষ্য করেছি তাই কী ঘটেছিল তা দেখার জন্য আমি 17px, 18px ... চেষ্টা করেছি।

— ed1nh0

বডি, বোতাম, ইনপুট, টেক্সারিয়া এবং উপাদান নির্বাচন করে 100% ঘোষণা করা ভাল অনুশীলন। এটি ব্যবহারকারীকে এমন একটি ডিফল্ট সেট করতে দেয় যা ব্রাউজারগুলির সাথে প্রেরণ করা 16px নয়। স্ক্রিনে পড়তে সমস্যা হয় এমন কেউ তার ডিফল্টটিকে 18px বা 20px এ সেট করতে পারে। আপনি তাদের পছন্দগুলিতে 16px জোর করে ওভাররাইড করতে চান না। আইওএসের কথা যখন আসে, তবে, তারা এইচআইজি যা বলেছে তা খুব ছোট যে কোনও মান বাড়ানোর সিদ্ধান্ত নিয়েছিল। দুর্ভাগ্যজনকভাবে দেখে মনে হচ্ছে এটি 100% মানের ব্যাখ্যা করে না, তাই আমরা এটি সন্তুষ্ট করতে ডিফল্টটিতে যুক্ত হয়ে আটকেছি।

— জে হোগ

আর আইওএস সাফারি, এই মন্তব্য হিসাবে এটি উপস্থিত হয় যে সাফারি সঠিকভাবে font-size: 100%মানটিকে ব্যাখ্যা করে এবং প্রয়োজনীয় 16px ধরে।

— নাথান লাফার্টি

Answer 6

input[type='text'],textarea {font-size:1em;}

Comments

মনে রাখবেন যে ব্যবহারকারীকে স্কেলযোগ্যযোগ্য হিসাবে সেট করা সমস্ত জুমিং অক্ষম করবে, এটি সম্ভবত একটি খারাপ ধারণা।

— ঝড়ঝোলা সুইপার

এটি কেবল তখনই কাজ করে যদি আপনার বডি ফন্টের আকারটি ডিফল্ট হয় (অ-নির্দিষ্ট, বা 1em, বা 100%)। আপনি যদি কোনও কাস্টম ফন্টের আকার সেট করেন তবে স্বয়ংক্রিয়ভাবে জুম এড়াতে font-sizeআপনি আপনার স্নিপেটে সেট করতে পারেন 16px।

— অ্যালান এইচ।

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

— toddles_fp

আমরাও 1emনা 1remএকটি সঠিক সমাধান কারণ তাদের উভয়ই কম হতে পারে 16pxএবং সাফারি অন্তত প্রয়োজন 16pxজুম না।

— ফাইনস

আমি ভিউপোর্ট সলিউশন ব্যবহার করেছি তবে এটি কার্যকর হয়নি, 16px সমাধানটি ভাল কাজ করে, তবে 16px আমার সাইটের ইনপুটবক্সের জন্য খুব বড়, এর কোনও তৃতীয় সমাধান রয়েছে

— সুনেথ কালহারা

Answer 7

এই সমস্যাটি ঠিক করার উপযুক্ত উপায় হ'ল মেটা ভিউপোর্টটি এতে পরিবর্তন করুন:

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

Comments

এই আচরণটি রোধ করার জন্য এটি "যথাযথ" উপায় নয়। পাঠ্যটি পড়ার পক্ষে খুব ছোট মনে করা হলে মোবাইল সাফারি জুম করে। সমস্ত একসাথে জুমিং স্যুইচ করা ভারি হাতছাড়া এবং ব্যবহারকারীরা আপনার পৃষ্ঠার সাথে এমনভাবে যোগাযোগ করতে সক্ষম হতে বাধা দেয় যাতে তারা আশা করতে পারে।

— অ্যালেকারস্ট

স্পষ্টতই আইওএস 10-এ অ্যাপল সর্বাধিক-স্কেলের সম্পত্তিটিকে আর সম্মান না করে পরিবর্তিত করেছে, সেটি নির্বিশেষে সমস্ত সাইটকে জুম করার অনুমতি দেয়।

— ওল্ফার

এটি আইওএস 10 20 / সেপ্টেম্বর / 2016 সংস্করণে কাজ করে ... কমপক্ষে আমার অ্যাপে কাজ করে ... ধন্যবাদ !!! আমি <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1, ন্যূনতম স্কেল = 1 , সর্বাধিক-স্কেল = 1"> ব্যবহার করার আগে তবে আমি প্রতিক্রিয়াটির লাইনে এটি পরিবর্তন করেছি এবং এটি কাজ করেছে ...

— এলজামজ

"নিশ্চিত করুন যে ব্রাউজারের চিম্টি জুমটি পৃষ্ঠার ভিউপোর্ট মেটা উপাদান দ্বারা অবরুদ্ধ নয় যাতে এটি পৃষ্ঠাটি 200% এ জুম করতে ব্যবহার করা যায় user এই মেটা উপাদানটির ব্যবহারকারী-স্কেলযোগ্য এবং সর্বাধিক-স্কেল বৈশিষ্ট্যের জন্য সীমাবদ্ধ মানগুলি এড়ানো উচিত" " w3.org/TR/mobile-accessibility-mapping/#zoom-magnication

— danielnixon

আমি এই মন্তব্যগুলি দেখেছি যে এই কয়েকটি মেটা ট্যাগ আইওএস 10 এ কীভাবে কাজ করে না এবং আমি জানি যে উপরের আইওএসের জন্য ক্রোমের উপর অন্তত কাজ করে। :) ধন্যবাদ!

— cbloss793

Answer 8

আমি খুঁজে পাওয়ার কোন পরিষ্কার উপায় নেই তবে এখানে একটি হ্যাক ...

1) আমি লক্ষ্য করেছি যে জুমের আগে মাউসওভার ইভেন্টটি ঘটে থাকে, তবে জুমটি মোডাউনড বা ফোকাস ইভেন্টগুলির আগে ঘটে।

2) আপনি জাভাস্ক্রিপ্ট ব্যবহার করে মেটাল ভিউপোর্ট ট্যাগটি গতিশীলভাবে পরিবর্তন করতে পারেন (জাভাস্ক্রিপ্টের সাহায্যে আইফোন সাফারিতে জুম সক্ষম / অক্ষম করুন দেখুন? )

সুতরাং, এটি চেষ্টা করুন (সংক্ষিপ্ততার জন্য jquery দেখানো):

$("input[type=text], textarea").mouseover(zoomDisable).mousedown(zoomEnable);
function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="user-scalable=1" />');
}

এটি অবশ্যই একটি হ্যাক ... এমন পরিস্থিতি থাকতে পারে যেখানে মাউসওভার / ডাউন সর্বদা এন্ট্রি / প্রস্থানগুলি ধরে না তবে এটি আমার পরীক্ষায় ভালভাবে কাজ করেছে এবং এটি একটি শক্তিশালী শুরু start

Comments

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

— dlo

Answer 9

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

input[type="text"]:focus, input[type="password"]:focus,
textarea:focus, select:focus {
  font-size: 16px;
}

Comments

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

— বিশ

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

— মাইকে

: ফোকাস আমার জন্য আইওএস 10.2 আইফোন 6 কাজ করে না, তবে ইনপুট [টাইপ = "পাঠ্য"]: হোভার ভালভাবে কাজ করেছে।

— আমিরহোসেইন আরজেড

Answer 10

যোগ ব্যবহারকারী-মাপযোগ্য = 0 ভিউপোর্ট মেটা নিম্নলিখিত হিসাবে

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

আমার জন্য কাজ করেছেন :)

Comments

"নিশ্চিত করুন যে ব্রাউজারের চিম্টি জুমটি পৃষ্ঠার ভিউপোর্ট মেটা উপাদান দ্বারা অবরুদ্ধ নয় যাতে এটি পৃষ্ঠাটি 200% এ জুম করতে ব্যবহার করা যায় user এই মেটা উপাদানটির ব্যবহারকারী-স্কেলযোগ্য এবং সর্বাধিক-স্কেল বৈশিষ্ট্যের জন্য সীমাবদ্ধ মানগুলি এড়ানো উচিত" " w3.org/TR/mobile-accessibility-mapping/#zoom-magnication

— danielnixon

এটি ডাব্লু 3 দ্বারা সংজ্ঞায়িত অ্যাক্সেসযোগ্যতার নিয়মগুলিকে ভঙ্গ করে।

— জোশুয়া রাসেল

আমার পক্ষে কাজ করেছেন, এটিও আমার পক্ষে সেরা সমাধান কারণ আমি চাই 16px এর নীচে ইনপুট ফন্টের আকারগুলি পরিবর্তন করতে এবং কোনও জেএস হ্যাক চাই না

— ব্লু বট

Answer 11

অন্যান্য অনেক উত্তর ইতিমধ্যে চিহ্নিত করেছে, maximum-scaleএটি মেটা viewportট্যাগ যুক্ত করে অর্জন করা যেতে পারে । তবে এটির অ্যান্ড্রয়েড ডিভাইসগুলিতে ব্যবহারকারী জুম অক্ষম করার নেতিবাচক পরিণতি রয়েছে । ( এটি ভি 10 এর পরে আইওএস ডিভাইসগুলিতে ব্যবহারকারী জুম অক্ষম করে না ))

ডিভাইসটি আইওএস থাকাকালীন আমরা গতিশীলভাবে মেটাতে যুক্ত maximum-scaleকরতে জাভাস্ক্রিপ্ট ব্যবহার করতে পারি viewport। এটি উভয় বিশ্বের সেরা অর্জন করে: আমরা ব্যবহারকারীকে ফোকাসে পাঠ্য ক্ষেত্রগুলিতে জুম করা থেকে iOS জুম করতে এবং আটকাতে পারি allow

| maximum-scale             | iOS: can zoom | iOS: no text field zoom | Android: can zoom |
| ------------------------- | ------------- | ----------------------- | ----------------- |
| yes                       | yes           | yes                     | no                |
| no                        | yes           | no                      | yes               |
| yes on iOS, no on Android | yes           | yes                     | yes               |

কোড:

const addMaximumScaleToMetaViewport = () => {
  const el = document.querySelector('meta[name=viewport]');

  if (el !== null) {
    let content = el.getAttribute('content');
    let re = /maximum\-scale=[0-9\.]+/g;

    if (re.test(content)) {
        content = content.replace(re, 'maximum-scale=1.0');
    } else {
        content = [content, 'maximum-scale=1.0'].join(', ')
    }

    el.setAttribute('content', content);
  }
};

const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;

// /programming/9038625/detect-if-device-is-ios/9039885#9039885
const checkIsIOS = () =>
  /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;

if (checkIsIOS()) {
  disableIosTextFieldZoom();
}

Comments

কেন আপনি একটি অনুলিপি তৈরি addMaximumScaleToMetaViewport? এটি কি পুরোপুরি শব্দার্থক কারণে?

— ফেরিমাসন

হ্যাঁ, কেবলমাত্র ফাংশনটিকে অন্য নামে ম্যাপিং করা হচ্ছে যাতে এটি কীভাবে ব্যবহার করা হচ্ছে তা পরিষ্কার।

— অলিভার জোসেফ অ্যাশ

Answer 12

জাভাস্ক্রিপ্ট হ্যাক যা আইওএস on এ কাজ করছে This এটি @ ডিএল এর উত্তরের উপর ভিত্তি করে তবে মাউসওভার এবং মাউসআউট ইভেন্টগুলি টাচস্টার্ট এবং স্পর্শ ইভেন্ট দ্বারা প্রতিস্থাপিত হয়। মূলত এই স্ক্রিপ্টটি জুমিং প্রতিরোধ করতে পুনরায় জুমটি সক্ষম করার আগে দেড় সেকেন্ড সময়সীমা যুক্ত করে।

$("input[type=text], textarea").on({ 'touchstart' : function() {
    zoomDisable();
}});
$("input[type=text], textarea").on({ 'touchend' : function() {
    setTimeout(zoomEnable, 500);
}});

function zoomDisable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />');
}
function zoomEnable(){
  $('head meta[name=viewport]').remove();
  $('head').prepend('<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1" />');
} 

Comments

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

— জাস্টিন ক্লাউড

বিলম্ব যোগ করা আইওএসের নতুন সংস্করণগুলিতে বেশ ভালভাবে কাজ করবে বলে মনে হচ্ছে, তবে এটি আকর্ষণীয় যে 250 মিমি সেট করার সময় এটি খুব ভাল কাজ করে না। এটি ইঙ্গিত দেয় যে কোনও পরিস্থিতিতে, 500 মিমি হয়ত কাজ করবে না, তবে এটি বেশিরভাগ সময় যদি কাজ করে তবে আমি অনুমান করি যে এটি কাজ না করার চেয়ে ভাল। ভাল চিন্তা.

— dlo

Answer 13

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

input, textarea {
    font-size: initial;
}

Comments

খুব সহজ, তবে "প্রাথমিক" আকারটি কী নিয়ন্ত্রণ করার কোনও উপায় আছে?

— 2540625

আমি এটি পরীক্ষা করে দেখিনি, তবে এটি হ'ল ফন্টের আকার নিয়ন্ত্রণ করার উপায়। (দয়া করে যদি এটি কাজ করে তবে আমাকে জানান এবং আমি আমার উত্তর আপডেট করব) বডি {ফন্ট-আকার: 20px; } ইনপুট {ফন্ট-আকার: উত্তরাধিকারী; }

Answer 14

আমি উপরে ক্রিস্টিনার সমাধান ব্যবহার করেছি, তবে বুটস্ট্র্যাপের জন্য একটি ছোট পরিবর্তন এবং ডেস্কটপ কম্পিউটারগুলিতে প্রয়োগ করার জন্য অন্য একটি নিয়ম দিয়ে। বুটস্ট্র্যাপের ডিফল্ট ফন্ট-আকার 14px যা জুমের কারণ করে। জুমটি রোধ করে বুটস্ট্র্যাপে "ফর্ম নিয়ন্ত্রণ" এর জন্য নিম্নলিখিতটি 16px এ পরিবর্তিত হয়।

@media screen and (-webkit-min-device-pixel-ratio:0) {
  .form-control {
    font-size: 16px;
  }
}

এবং নন-মোবাইল ব্রাউজারগুলির জন্য 14px এ ফিরে যান।

@media (min-width: 768px) {
  .form-control {
    font-size: 14px;
  }
}

আমি .for- নিয়ন্ত্রণ: ফোকাস ব্যবহার করার চেষ্টা করেছি, যা ফোকাস ব্যতীত এটি 14px এ রেখেছিল যা এটি 16px এ পরিবর্তিত হয়েছে এবং এটি iOS8 এর সাথে জুম সমস্যার সমাধান করতে পারে নি। আইওএস 8 ব্যবহার করে আমার আইফোনটিতে অন্তত আইফোনটি পৃষ্ঠাটি জুম না করার জন্য ফন্টের আকার 16px হওয়া উচিত।

Answer 15

আমি jQuery এর সাথে এটিও করেছি:

$('input[type=search]').on('focus', function(){
  // replace CSS font-size with 16px to disable auto zoom on iOS
  $(this).data('fontSize', $(this).css('font-size')).css('font-size', '16px');
}).on('blur', function(){
  // put back the CSS font-size
  $(this).css('font-size', $(this).data('fontSize'));
});

অবশ্যই, যদি এই 16pxফন্ট-আকারের নকশাটি ভেঙে যায় তবে ইন্টারফেসের অন্যান্য কিছু উপাদানকে মানিয়ে নিতে হবে ।

Comments

এটি উত্কৃষ্ট। এটি স্টাইলিন '। আমি পাঞ্জার বাইরে আছি চতুর পদ্ধতির।

— কাকোজনঃ

@ ওল্ফার আপনি একটি আসল ডিভাইসে চেষ্টা করেছিলেন?

— নিকোলাস হোইজে

এটি আইওএস-এ আমাদের জন্য কাজ করেছে। আমি সিএসএস ট্রান্সফর্ম এবং নেতিবাচক মার্জিনের সাথে ঘাটতির পরিবর্তে এই পদ্ধতির সেরাটি পছন্দ করি।

— বেনামে এক-

Answer 16

চেষ্টা করার কিছুক্ষণ পরে আমি এই সমাধানটি নিয়ে এসেছি

// set font-size to 16px to prevent zoom 
input.addEventListener("mousedown", function (e) {
  e.target.style.fontSize = "16px";
});

// change font-size back to its initial value so the design will not break
input.addEventListener("focus", function (e) {
  e.target.style.fontSize = "";
});

"মোডাউনডাউন" এ এটি ইনপুটটির ফন্ট-আকার 16px এ সেট করে। এটি জুমিং প্রতিরোধ করবে। ফোকাস ইভেন্টে এটি ফন্ট-আকারকে প্রাথমিক মানটিতে ফিরে আসে।

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

Comments

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

— এমপারিজেউ

আইওএস 12.1 এ কাজ করার বিষয়টি নিশ্চিত হয়েছে, ধন্যবাদ

— জিকি

Answer 17

এখানে প্রায় প্রতিটি একক লাইন পড়ার পরে এবং বিভিন্ন সমাধানগুলি পরীক্ষা করার পরে, যারা তাদের সমাধানগুলি ভাগ করেছেন তাদের জন্য ধন্যবাদ, আমি কী নিয়ে এসেছি, আইফোন 7 আইওএস 10.x এ আমার জন্য পরীক্ষিত এবং কাজ করেছি:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: initial;}
}
@media (min-width: 768px) {
    input[type="email"]:hover,
    input[type="number"]:hover,
    input[type="search"]:hover,
    input[type="text"]:hover,
    input[type="tel"]:hover,
    input[type="url"]:hover,
    input[type="password"]:hover,
    textarea:hover,
    select:hover{font-size: inherit;}
}

এটিতে কিছুটা কনস রয়েছে, যদিও "হোভার" এড এবং "ফোকাস" এড স্টেটগুলির মধ্যে দ্রুত ফন্টের আকার পরিবর্তনের ফলস্বরূপ এটি একটি "লাফ" রয়েছে - এবং কার্য সম্পাদনের উপর পুনরায় চিত্রের প্রভাব

Comments

আপনার মতামতের জন্য আপনাকে ধন্যবাদ, মাইকবাউটিন। আপনি কি দয়া করে আপনার এনভিভি (ডিভাইস / আইওএস সংস্করণ) ভাগ করতে পারেন?

— l3bel 20

Answer 18

@ জিরিকুট্টার উত্তরে অনুপ্রাণিত হয়ে আমি এই বিএসএস-এর বিট যোগ করে এই সমস্যাটি সমাধান করেছি:

#myTextArea:active {
  font-size: 16px; /* `16px` is safer I assume, although `1rem` works too */
}

কোনও জেএস, এবং আমি কোনও ফ্ল্যাশ বা কিছুই লক্ষ্য করি না।

এটি লক্ষণীয় যে একটি viewportসাথে maximum-scale=1এটিও কাজ করে, তবে পৃষ্ঠাটি যখন একটি আইফ্রেমে হিসাবে লোড করা হয় না, বা আপনার যদি অন্য কোনও স্ক্রিপ্ট থাকে তবে viewportইত্যাদি ifying

Answer 19

সিউডো উপাদানগুলি আগের মতো :focusকাজ করে না। আইওএস 11 থেকে, আপনার মূল শৈলীর আগে একটি সাধারণ রিসেট ঘোষণা যুক্ত করা যেতে পারে (আপনি তাদের আরও ছোট ফন্টের আকারের সাথে ওভাররাইড না করে providing

/* Prevent zoom */
select, input, textarea {
  font-size: 16px;
}

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

উদাহরণস্বরূপ শ্রেণি: f5এর সমতুল্য: fontSize: 1remযদি আপনি বডি ফন্ট স্কেলটি ডিফল্ট করে রাখেন তবে তা ঠিক।

তবে: আপনি যদি হরফ আকারের শ্রেণি চয়ন করেন: f6এটি fontSize: .875remউপরের দিকে একটি ছোট ডিসপ্লেতে সমান হবে । এই পরিস্থিতিতে আপনার রিসেট ঘোষণাগুলি সম্পর্কে আপনাকে আরও সুনির্দিষ্ট হতে হবে:

  /* Prevent zoom */
  select, input, textarea {
    font-size: 16px!important;
  }

@media screen and (min-width: 30em) {

/* not small */

}

Answer 20

যাইহোক, আপনি যদি বুটস্ট্র্যাপ ব্যবহার করেন তবে আপনি কেবল এই বৈকল্পিকটি ব্যবহার করতে পারেন:

.form-control {
  font-size: 16px;
}

Answer 21

আমাকে ডাচ বিশ্ববিদ্যালয়ের ওয়েবসাইটের (যা ফর্ম নিয়ন্ত্রণে 15px ব্যবহার করা হয়েছিল) ফর্ম নিয়ন্ত্রণ ইস্যুতে অটো জুমটি "ফিক্স" করতে হয়েছিল। আমি নিম্নলিখিত প্রয়োজনের সেট নিয়ে এসেছি:

• ব্যবহারকারী অবশ্যই জুম ইন করতে সক্ষম হবে
• হরফ আকার একই থাকতে হবে
• অস্থায়ী বিভিন্ন স্টাইলিংয়ের কোনও ঝলক নেই
• কোন jQuery প্রয়োজন
• অবশ্যই নতুন আইওএসে কাজ করতে হবে এবং অন্য কোনও ওএস / ডিভাইস সংমিশ্রণকে বাধাগ্রস্থ করবে না
• যদি সম্ভব হয় তবে কোনও যাদু টাইমআউট নেই, এবং সঠিকভাবে পরিষ্কার টাইমারগুলির প্রয়োজন হলে

এটাই আমি এ পর্যন্ত এলাম:

/*
NOTE: This code overrides the viewport settings, an improvement would be
      to take the original value and only add or change the user-scalable value
*/

// optionally only activate for iOS (done because I havn't tested the effect under other OS/devices combinations such as Android)
var iOS = navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform)
if (iOS)
  preventZoomOnFocus();


function preventZoomOnFocus()
{
  document.documentElement.addEventListener("touchstart", onTouchStart);
  document.documentElement.addEventListener("focusin", onFocusIn);
}


let dont_disable_for = ["checkbox", "radio", "file", "button", "image", "submit", "reset", "hidden"];
//let disable_for = ["text", "search", "password", "email", "tel", "url", "number", "date", "datetime-local", "month", "year", "color"];


function onTouchStart(evt)
{
  let tn = evt.target.tagName;

  // No need to do anything if the initial target isn't a known element
  // which will cause a zoom upon receiving focus
  if (    tn != "SELECT"
      &&  tn != "TEXTAREA"
      && (tn != "INPUT" || dont_disable_for.indexOf(evt.target.getAttribute("type")) > -1)
     )
    return;

  // disable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=0");
}

// NOTE: for now assuming this focusIn is caused by user interaction
function onFocusIn(evt)
{
  // reenable zoom
  setViewport("width=device-width, initial-scale=1.0, user-scalable=1");
}

// add or update the <meta name="viewport"> element
function setViewport(newvalue)
{
  let vpnode = document.documentElement.querySelector('head meta[name="viewport"]');
  if (vpnode)
    vpnode.setAttribute("content",newvalue);
  else
  {
    vpnode = document.createElement("meta");
    vpnode.setAttribute("name", "viewport");
    vpnode.setAttribute("content", newvalue);
  }
}

কিছু নোট:

• মনে রাখবেন যে এখনও পর্যন্ত আমি এটি iOS 11.3.1 এ কেবল পরীক্ষা করেছি, তবে শিগগিরই এটি কয়েকটি অন্যান্য সংস্করণে পরীক্ষা করব
• ফোকাসইন ইভেন্টগুলির ব্যবহারের অর্থ এটির জন্য কমপক্ষে আইওএস 5.1 প্রয়োজন (তবে আমি দেখি যে আমরা iOS এর 9 বছরের পুরানো সংস্করণগুলিতে যেভাবে কাজ করি তা দুর্দান্ত বোনাস হিসাবে 9 এর চেয়ে বেশি হয়)
• ইভেন্ট-প্রতিনিধি ব্যবহার করা হচ্ছে কারণ আমি প্রচুর সাইটগুলিতে কাজ করি এমন পৃষ্ঠাগুলি রয়েছে যা গতিশীলভাবে ফর্ম নিয়ন্ত্রণ তৈরি করতে পারে
• ইভেন্টের তালিকাগুলি এইচটিএমএল উপাদান (ডকুমেন্টএলমেন্ট) এ সেট করা যাতে শরীর উপলব্ধ হওয়ার জন্য অপেক্ষা না করে (দস্তাবেজটি প্রস্তুত / লোড অবস্থায় রয়েছে কিনা তা পরীক্ষা করে দেখার বা ডিওএমসিএনটিএলএলড ইভেন্টের জন্য অপেক্ষা করার দরকার পড়তে চাই না)

Answer 22

ফন্টের আকারটি 16px এ সেট করার পরিবর্তে আপনি এটি করতে পারেন:

1. ইনপুট ক্ষেত্রটি স্টাইল করুন যাতে এটি তার উদ্দেশ্যযুক্ত আকারের চেয়ে বড় হয়, লজিকাল ফন্টের আকার 16px এ সেট করার অনুমতি দেয়।
2. সঠিক আকারে ইনপুট ক্ষেত্রটি সঙ্কুচিত করতে scale()CSS রূপান্তর এবং নেতিবাচক মার্জিনগুলি ব্যবহার করুন ।

উদাহরণস্বরূপ, ধরুন আপনার ইনপুট ক্ষেত্রটি মূলত:

input[type="text"] {
    border-radius: 5px;
    font-size: 12px;
    line-height: 20px;
    padding: 5px;
    width: 100%;
}

আপনি যদি 16/12 = 133.33% দ্বারা সমস্ত মাত্রা বাড়িয়ে ক্ষেত্রটি প্রসারিত করেন, তবে 12/16 scale()= 75% দ্বারা ব্যবহার হ্রাস করুন, ইনপুট ক্ষেত্রে সঠিক ভিজ্যুয়াল আকার (এবং ফন্টের আকার) থাকবে এবং কোনও জুম থাকবে না ফোকাস।

যেমন scale() শুধুমাত্র চাক্ষুষ আকার প্রভাবিত করে, আপনাকে নেতিবাচক মার্জিন যোগ করার জন্য ক্ষেত্রের যৌক্তিক আকার হ্রাস করতে হবে।

এই সিএসএস সহ:

input[type="text"] {
    /* enlarge by 16/12 = 133.33% */
    border-radius: 6.666666667px;
    font-size: 16px;
    line-height: 26.666666667px;
    padding: 6.666666667px;
    width: 133.333333333%;

    /* scale down by 12/16 = 75% */
    transform: scale(0.75);
    transform-origin: left top;

    /* remove extra white space */
    margin-bottom: -10px;
    margin-right: -33.333333333%;
}

ইনপুট ক্ষেত্রে 16px এর যৌক্তিক ফন্টের আকার থাকবে যখন 12px পাঠ্য উপস্থিত হবে।

আমার একটি ব্লগ পোস্ট রয়েছে যেখানে আমি কিছুটা বিশদভাবে চলেছি এবং দেখতে এইচটিএমএল হিসাবে এই উদাহরণ রয়েছে:
আইফোনটিতে সাফারি কোনও ইনপুট জুম নেই, পিক্সেল নিখুঁত উপায়

Answer 23

এমনকি এই উত্তরগুলির সাথে আমার কী চলছে তা নির্ধারণ করতে তিন দিন সময় লেগেছিল এবং ভবিষ্যতে আমার আবার সমাধানের প্রয়োজন হতে পারে।

আমার পরিস্থিতি বর্ণিতটির থেকে কিছুটা আলাদা ছিল।

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

এটি যথাযথ প্রসঙ্গে রঙগুলি দেখতে দেওয়ার জন্য নির্বাচনটিকে সাধারণত লুকিয়ে রাখার সময়, পৃষ্ঠার অন্য কোথাও বর্ণ ডিভের সাথে ব্যবহারকারীর মিথস্ক্রিয়ার ভিত্তিতে পাঠ্য রঙগুলি অদৃশ্যভাবে পরিবর্তন করতে সক্ষম করে।

ওয়েল, আইপ্যাডের সাফারিতে, রঙ ডিভ ক্লিক করার ফলে অন-স্ক্রীন কীবোর্ডটি এসেছিল এবং আমি যা কিছু করেছি তা এটি আটকাতে পারে না।

আমি অবশেষে বুঝতে পারলাম আইপ্যাড কীভাবে এটি করছে।

এটি একটি টাচস্টার্ট এবং স্পর্শক ক্রমটির জন্য শোনায় যা সম্পাদনযোগ্য পাঠ্যের একটি নির্বাচনকে ট্রিগার করে।

যখন সংমিশ্রণটি ঘটে তখন এটি অন-স্ক্রীন কীবোর্ডটি দেখায়।

প্রকৃতপক্ষে, এটি একটি ডলি জুম করে যেখানে এটি সম্পাদনযোগ্য পাঠ্যে জুম করার সময় অন্তর্নিহিত পৃষ্ঠাটি প্রসারিত করে। আমি কী দেখছি তা বুঝতে আমার একদিন লেগেছিল।

সুতরাং আমি যে সমাধানটি ব্যবহার করেছি তা হ'ল দুটি স্পর্শ-স্টার্টকে বাধা দেওয়া এবং সেই নির্দিষ্ট রঙের ডিভগুলিকে স্পর্শ করা। উভয় হ্যান্ডলারে আমি প্রচার এবং বুদবুদ বন্ধ করি এবং মিথ্যা প্রত্যাবর্তন করি। তবে স্পর্শ ইভেন্টে আমি ক্লিক করে ট্রিগার করা একই আচরণটি ট্রিগার করি।

সুতরাং, এর আগে, সাফারি আমার "ট্রিপস্টার্ট", ​​"মোডাউনডাউন", "টাচেন্ড", "মাউসআপ", "ক্লিক", এবং আমার কোডটির কারণে একটি ক্রম অনুসারে একটি পাঠ্য নির্বাচন যা ট্রিগার করছিল।

ইন্টারসেপ্টগুলির কারণে নতুন ক্রমটি কেবল পাঠ্য নির্বাচন। সাফারি এটিকে প্রক্রিয়া করার আগে এবং এর কীবোর্ড স্টাফ করার আগে সমস্ত কিছু বাধা দেয়। টাচস্টার্ট এবং টাচেনড ইন্টারসেপ্টগুলি মাউস ইভেন্টগুলিকেও ট্রিগার হতে বাধা দেয় এবং প্রসঙ্গে এটি পুরোপুরি ঠিক।

আমি এটি বর্ণনা করার সহজ উপায় জানি না তবে আমি মনে করি এটি এখানে রাখা এটি গুরুত্বপূর্ণ কারণ আমি প্রথমে সমস্যাটির এক ঘন্টার মধ্যে এই থ্রেডটি পেয়েছি।

আমি 98% নিশ্চিত যে একই ফিক্সটি ইনপুট বাক্স এবং অন্য যে কোনও কিছুর সাথে কাজ করবে। স্পর্শ ইভেন্টগুলিকে বাধা দিন এবং সেগুলি প্রচার বা বুদবুদ না দিয়ে আলাদাভাবে প্রক্রিয়া করুন, এবং সাফারি কীবোর্ড ট্রিগার হিসাবে ক্রমটিকে স্বীকৃতি দেয় না তা নিশ্চিত করার জন্য একটি ক্ষুদ্র সময়সীমার পরে কোনও নির্বাচন করার কথা বিবেচনা করুন।

Comments

এটি সাফারি কী করছে তার দুর্দান্ত ব্যাখ্যা। ধন্যবাদ!

— জেরেমি

Answer 24

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

ডিফল্টরূপে, আমি ইনপুট ক্ষেত্রে 93.8% (15px) ফন্ট-আকার ব্যবহার করি এবং আমার সিএসএস স্নিপেট যুক্ত করে এটি 93.8% এ থাকে। 16px এ পরিবর্তন করার বা এটিকে একটি নির্দিষ্ট নম্বর করার দরকার নেই।

input[type="text"]:focus,
textarea:focus {
    -webkit-text-size-adjust: 100%;
}

Comments

এটি আমার পক্ষে কাজ করে না, সর্বশেষতম আইওএস 6 এবং আইওএস 9.2.1 উভয়ই দিয়ে পরীক্ষিত। এখানে একটি ন্যূনতম পুনরুত্পাদনযোগ্য পৃষ্ঠা: পেস্টবিন.com / bh5Zhe9h এটি এখনও ফোকাসে জুম করে। স্ট্রেঞ্জ যে এই 2015 পোস্ট এবং এখনো upvoted আইওএস 6. কাজ করে না হয়

— আলেক্সান্ডার Dieulot

Answer 25

শরীরের ফন্ট-আকারের সমান একটি ফন্ট-আকার (ইনপুট ক্ষেত্রের জন্য) সেট করা যা ব্রাউজারকে জুম বা আউট বাধা দেওয়া থেকে বাধা দেয় বলে মনে হয় I'd আমি font-size: 1remআরও মার্জিত সমাধান হিসাবে ব্যবহার করার পরামর্শ দিই ।

Answer 26

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

কোনও পাঠ্য ইনপুট ফিউজড হয়ে যাওয়ার সাথে সাথে ইনপুটটি ছেড়ে গেলে পুনরায় সক্ষম করার সাথে সাথে জুমিং অক্ষম করা হয়।

দ্রষ্টব্য: কিছু ব্যবহারকারী সংক্ষিপ্ত পাঠ্য ইনপুটটিতে পাঠ্য সম্পাদনা করতে পারে না! অতএব, আমি ব্যক্তিগতভাবে সম্পাদনার সময় ইনপুটটির পাঠ্যের আকার পরিবর্তন করতে পছন্দ করি (নীচের কোডটি দেখুন)।

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function onBeforeZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "user-scalable=0";
    }
}
function onAfterZoom(evt) {
    var viewportmeta = document.querySelector('meta[name="viewport"]');
    if (viewportmeta) {
        viewportmeta.content = "width=device-width, user-scalable=1";
    }
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

নীচের কোডটি ইনপুটটির পাঠ্য আকারকে 16 পিক্সেল হিসাবে পরিবর্তিত করবে (গণনা করা, অর্থাত্ বর্তমান জুম আকারে) ফোকাসটি থাকবে। আইফোন তাই স্বয়ংক্রিয়ভাবে জুম-ইন করবে না।

দ্রষ্টব্য: জুম ফ্যাক্টরটি 320 পিক্সেলের উইন্ডো.ইনারওয়াইথ এবং আইফোনের প্রদর্শনের ভিত্তিতে গণনা করা হয়। এটি কেবল প্রতিকৃতি মোডে আইফোনের জন্য বৈধ হবে।

<script type="text/javascript">
<!--
function attachEvent(element, evtId, handler) {
    if (element.addEventListener) {
        element.addEventListener(evtId, handler, false);
    } else if (element.attachEvent) {
        var ieEvtId = "on"+evtId;
        element.attachEvent(ieEvtId, handler);
    } else {
        var legEvtId = "on"+evtId;
        element[legEvtId] = handler;
    }
}
function getSender(evt, local) {
    if (!evt) {
        evt = window.event;
    }
    var sender;
    if (evt.srcElement) {
        sender = evt.srcElement;
    } else {
        sender = local;
    }
    return sender;
}
function onBeforeZoom(evt) {
    var zoom = 320 / window.innerWidth;
    var element = getSender(evt);
    element.style.fontSize = Math.ceil(16 / zoom) + "px";
}
function onAfterZoom(evt) {
    var element = getSender(evt);
    element.style.fontSize = "";
}
function disableZoom() {
    // Search all relevant input elements and attach zoom-events
    var inputs = document.getElementsByTagName("input");
    for (var i=0; i<inputs.length; i++) {
        attachEvent(inputs[i], "focus", onBeforeZoom);
        attachEvent(inputs[i], "blur", onAfterZoom);
    }
}
if (navigator.userAgent.match(/iPhone/i)) {
    attachEvent(window, "load", disableZoom);
}
// -->
</script>

Answer 27

এটি খুঁজে পেতে আমার কিছুটা সময় লেগেছে তবে এখানে আমি খুঁজে পেয়েছি সেরা কোডটি ...... http://nerd.vasilis.nl/prevent-ios-from-zooming-onfocus/

var $viewportMeta = $('meta[name="viewport"]');
$('input, select, textarea').bind('focus blur', function(event) {
$viewportMeta.attr('content', 'width=device-width,initial-scale=1,maximum-scale=' +        (event.type == 'blur' ? 10 : 1));
});

Answer 28

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

// disable autozoom when input is focused
    var $viewportMeta = $('head > meta[name="viewport"]');
    $('input, select, textarea').bind('touchend', function(event) {
        $viewportMeta.attr('content', 'width=640, user-scalable=0');
        setTimeout(function(){ $viewportMeta.attr('content', 'width=640, user-scalable=1'); }, 1)
    });

Comments

যদি ব্যবহারকারীরা ইনপুট নিয়ন্ত্রণে ক্লিক করার আগে কিছুটা আগেই জুম করে ফেলেছিল, তবে এই সমাধানটি কি ভিউপোর্টকে হঠাৎ "আনজুম" করতে বাধ্য করবে?

— ব্রুনো টর্কোয়াটো

হ্যাঁ এটি করে তবে এটি আগের "জুম" প্রভাবের চেয়ে আর ঝাঁকুনির মতো দেখায় না যা ব্যবহারকারীরা প্রতিবার ইনপুটটিতে ক্লিক করলে ঘটে।

— পিট

Answer 29

16px এ ফন্ট-আকার নির্ধারণের বিষয়ে শীর্ষ উত্তরের একটি মন্তব্য জিজ্ঞাসা করেছিল যে এটি কীভাবে সমাধান, আপনি যদি বড় / ছোট ফন্ট চান তবে কী হবে।

আমি আপনার সকলের সম্পর্কে জানি না, তবে ফন্টের আকারের জন্য px ব্যবহার করা সবচেয়ে ভাল উপায় নয়, আপনার ইম ব্যবহার করা উচিত।

আমি আমার প্রতিক্রিয়াশীল সাইটে এই ইস্যুতে দৌড়েছি যেখানে আমার পাঠ্য ক্ষেত্রটি 16 পিক্সেলের চেয়ে বড়। আমার ফর্ম ধারকটি 2 রেমে সেট করা ছিল এবং আমার ইনপুট ফিল্ডটি 1.4 এম তে সেট করা হয়েছিল। আমার মোবাইল ক্যোয়ারিতে আমি ভিউপোর্টের উপর নির্ভর করে এইচটিএমএল ফন্ট-আকার পরিবর্তন করি। যেহেতু ডিফল্ট এইচটিএমএল 10 হ'ল, আমার ইনপুট ফিল্ডটি ডেস্কটপে 28px গণনা করে

অটো-জুম অপসারণ করতে আমাকে আমার ইনপুটটি 1.6 মিমি পরিবর্তন করতে হয়েছিল। এটি আমার ফন্টের আকার 32px এ বাড়িয়েছে। কিছুটা উঁচু এবং খুব কমই লক্ষণীয়। আমার আইফোন 4 এবং 5 এ আমি আমার এইচটিএমএল ফন্টের আকারকে প্রতিকৃতির জন্য 15px এবং ল্যান্ডস্কেপের জন্য 10px এ পরিবর্তন করি। এটি দেখতে পেল যে p পিক্সেলের আকারের মিষ্টি স্পটটি ছিল 48px যার কারণে আমি 1.4 মিম (42px) থেকে 1.6 মিম (48 পিক্স) এ পরিবর্তিত হয়েছি।

আপনার যা করতে হবে তা হ'ল হ'ল ফন্ট-আকারের মিষ্টি স্পট এবং তারপরে এটিকে আপনার রিম / ইম আকারে পিছনে রূপান্তর করতে হবে।

Answer 30

আমার এক প্রকল্পে আমি এখানে একটি হ্যাক ব্যবহার করেছি:

select {
    font-size: 2.6rem; // 1rem = 10px
    ...
    transform-origin: ... ...;
    transform: scale(0.5) ...;
}

আমি চাইছিলাম প্রাথমিক শৈলী এবং স্কেল সহ শেষ হয়েছে তবে ফোকাসে কোনও জুম নেই।