ভিওপোর্ট জুমিং আইওএস 10+ সাফারি অক্ষম করবেন?

Question

আমি আমার আইফোন 6 প্লাসটি আইওএস 10 বিটা সংস্করণে আপডেট করেছি এবং সবেমাত্র পেয়েছি যে মোবাইল সাফারিতে , user-scalable=noআপনি মেটা ট্যাগে আইগনরে কোডটি ডাবল ট্যাপ করে বা চিট করে কোনও ওয়েবপৃষ্ঠাগুলি জুম করতে পারেন । এটি কোনও বাগ বা বৈশিষ্ট্য কিনা তা আমি জানি না। যদি এটি কোনও বৈশিষ্ট্য হিসাবে বিবেচনা করা হয়, তবে আমরা কীভাবে আইওএস 10 সাফারি জুমিং ভিউপোর্টটি অক্ষম করব?

---

আইওএস 11/12 প্রকাশের আপডেট হয়েছে, আইওএস 11 এবং আইওএস 12 সাফারি এখনও মেটা ট্যাগকে সম্মান করে নাuser-scalable=no ।

Comments

একটি অভিগম্যতা বৈশিষ্ট্য: এও জেনে রাখা ভালো সাফারিতে আইওএস 10 twitter.com/thomasfuchs/status/742531231007559680/photo/1

— ErikE

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

— ডিগাটউড

এটি "খারাপ অনুশীলন" বলা একটি মতামত এবং এটি বাস্তবতা পরিবর্তন করে না যে অ্যাপল ওয়েব স্ট্যান্ডার্ডগুলি গ্রহণের জন্য জোর দিয়েছিল যা সম্প্রদায় কয়েক মাস / বছর / দশক ধরে বাস্তবায়িত ক্রস প্ল্যাটফর্মের জন্য ব্যয় করে এবং তাদের উপর একটি বিশাল জঞ্জাল গ্রহণ করে। অ্যাপলকে কেন নির্দেশ দেওয়া উচিত যে ওয়েব ডিজাইনাররা জানেন না যে তারা কী করছেন? ভয়াবহ যুক্তি।

— সাম্র্যাপ

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

— উইলিয়াম ইস্তেড

উত্তরটি সহজ, অ্যাপল: মেটা ট্যাগটি ডিফল্ট-অফ অ্যাক্সেসযোগ্যতার সেটিংসটি অক্ষম করে দিন। যাঁদের এটি প্রয়োজন, তাদের এটি হবে, যারা শাস্তি দেয় না তাদের শাস্তি না দিয়ে।

— রুবেন মার্টিনেজ জুনিয়র

Answer 1

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

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

আপনি এই জাতীয় কিছু দিয়ে চিমটি থেকে জুম বন্ধ করতে পারেন:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, false);

নোট করুন যে কোনও গভীর লক্ষ্য যদি ইভেন্টটিতে স্টপপ্রোগেশন কল করে, ইভেন্টটি নথিতে পৌঁছাবে না এবং স্কেলিং আচরণটি এই শ্রোতা দ্বারা রোধ করা হবে না।

ডাবল-ট্যাপ-টু-জুম অক্ষম করা একই রকম। পূর্ববর্তী ট্যাপের 300 মিলিসেকেন্ডের মধ্যে ঘটে যাওয়া দস্তাবেজের কোনও ট্যাপ আপনি অক্ষম করুন:

var lastTouchEnd = 0;
document.addEventListener('touchend', function (event) {
  var now = (new Date()).getTime();
  if (now - lastTouchEnd <= 300) {
    event.preventDefault();
  }
  lastTouchEnd = now;
}, false);

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

আপনি যদি কোনও নেটিভ অ্যাপ্লিকেশনটিতে ডাব্লুউইউবিউ ভিউতে এটি সমাধান করার চেষ্টা করছেন তবে উপরে বর্ণিত সমাধানটি কার্যকর, তবে এটি আরও ভাল সমাধান: https://stackoverflow.com/a/31943976/661418 । এবং অন্যান্য উত্তরে যেমন উল্লেখ করা হয়েছে, আইওএস 10 বিটা 6 তে অ্যাপল এখন মেটা ট্যাগকে সম্মান জানাতে একটি পতাকা সরবরাহ করেছে।

আপডেট মে 2017: আমি পুরানো 'টাচস্টার্টের দৈর্ঘ্যের উপর চেক স্পর্শ দৈর্ঘ্য' সরল 'চেক ইভেন্ট.স্কেল' টাচ 'পদ্ধতির সাথে চিমটি-জুম অক্ষম করার পদ্ধতিটি প্রতিস্থাপন করেছি। প্রত্যেকের জন্য আরও নির্ভরযোগ্য হওয়া উচিত।

Comments

নোট করুন যে টাচস্টার্ট হ্যাকটি বেমানান ... এবং আপনি যদি এটির পাশ দিয়ে যাওয়ার ব্যবস্থা করেন তবে আপনি খুব অস্বস্তিকর অবস্থায় আটকে আছেন

— স্যাম সাফ্রন

যেমন। পূর্ণ স্ক্রিন ম্যাপিং অ্যাপস, ম্যাপিং অ্যাপ্লিকেশনে (গুগল ম্যাপস জেএস, লিফলেট ইত্যাদি) হার্ড কোডিংযুক্ত একটি জুম বৈশিষ্ট্য রয়েছে। গুগল একটি মেটা ট্যাগ যুক্ত করার পরামর্শ দেয় <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />এবং ব্রাউজার যদি মেটা ট্যাগকে সম্মান না করে তবে এটি ব্রাউজারের খুব খারাপ নকশা। অন্যটি খুব খারাপ ডিজাইনের মতো স্লাইড করে পিছনে / ফরোয়ার্ড ক্রিয়া যা আইওএস 9-10 এ প্রতিরোধ করা যায় না। এটি ওয়েব অ্যাপ্লিকেশনটির ভিতরে মারাত্মকভাবে টেনে নিয়ে যাওয়ার ক্রিয়াগুলি ভেঙে দেয়।

— টিমো কাহকেনেন

ব্যবহারকারী যদি একটি আঙুল দিয়ে টানতে শুরু করেন তবে স্ক্রিনে একটি দ্বিতীয় আঙুল রাখলে চিমটি-জুম করতে সক্ষম হবে। আপনি উভয় জুম এবং একটি সঙ্গে স্ক্রল নিষ্ক্রিয় করতে পারেন preventDefaultউপর touchmove। আপনি স্ক্রোল অক্ষম না করে (সম্পূর্ণ) জুম অক্ষম করতে পারবেন না।

— পাওলো

বাহ, এই অংশটি (আমি এখানে পেস্ট করব) আমার পক্ষে সহায়ক ছিল। আমি ইন্টারনেটে অন্য কারও দ্বারা এটি উল্লেখ করা দেখিনি। এই সমস্যাটি সমাধান করতে আমার কয়েক ঘন্টা সময় লেগেছে। আমি এ সম্পর্কে অ্যাপলের ইউএক্স ডিজাইন পছন্দগুলিতে সত্যিই হতাশ, যেখানে অটো-জুম-ইন গঠন করা হয়েছে তবে জুম ফিরে আসবেন না। If you don't set up your form elements right, focusing on an input will auto-zoom, and since you have mostly disabled manual zoom, it will now be almost impossible to unzoom. Make sure the input font size is >= 16px.

— রায়ান

দেখে মনে হচ্ছে এটি আইওএস 12 এ আর কাজ করছে না। আইওএস 12 এর জন্য এই কাজটি কীভাবে করবেন?

— টিজেআর

Answer 2

এটি আইওএস 10-এ একটি নতুন বৈশিষ্ট্য।

আইওএস 10 বিটা 1 রিলিজ নোটগুলি থেকে:

• সাফারিতে ওয়েবসাইটগুলিতে অ্যাক্সেসযোগ্যতার উন্নতি করতে, ব্যবহারকারীরা এখন user-scalable=noভিউপোর্টে সেট করার পরেও ব্যবহারকারীরা এখন জুম থেকে চিমটি টানতে পারেন।

আমি আশা করি আমরা শীঘ্রই কোনও উপায়ে এটি অক্ষম করতে একটি জেএস অ্যাড-অন দেখতে যাচ্ছি।

Comments

@ ওঞ্জা: আমি মনে করি এটি খারাপ না। আমি মনে করি এটা ভালো. চিমটি / জুমিং (ডিফল্ট ব্যবহারকারীর আচরণ) অক্ষম করা খারাপ বলে বিবেচিত হয় এবং প্রচুর মোবাইল ওয়েবসাইট এটি করে। একমাত্র গ্রহণযোগ্য ব্যবহারকারীর কেসটি এমন একটি আসল ওয়েব অ্যাপ্লিকেশন যা কোনও অ্যাপ্লিকেশনটির মতো দেখায় এবং অনুভব করে।

— ওয়াটার্ডস

খারাপ .. আমি জেএস এবং ব্লক জুম ব্যবহার করে ভিউপোর্টটি পরিবর্তন করি যখন তখন ওয়েবসাইটে কিছু উপাদান নির্বাচন করা হয় এখন এই "সিদ্ধান্ত" এর কারণে এটি ভেঙে গেছে। যদি কেউ এটিকে অবরুদ্ধ করার সিদ্ধান্ত নেন - এর একটি কারণ আছে।

— ঝেনিয়া

@ কার্ল্থ এটি গেম ডেভেলপারের পক্ষে খুব বিছানা

— সন্দীপ

আমার আইওএস 10.0.2 রয়েছে, ব্যবহারকারী-স্কেলেবল = কোনটিই আমাদের ওয়েবসাইটে আর জুমিং অক্ষম করে না ... জুমিংয়ের সাথে আমাদের মূল সমস্যাটি আমাদের স্থির পাশের মেনুতে থাকে .. এটি কেবল বিন্যাসটি ভেঙে দেয় .. এটির কোনও ধারণা বা সমাধান? আমি বুঝতে পেরেছি যে জুমিং অ্যাক্সেসযোগ্যতার জন্য ভাল, আমরা জেএস ইভেন্টগুলি (হাতুড়ি) এবং CSS ব্যবহার করে আমাদের সাইটের নির্দিষ্ট অংশগুলিতে জুমিং উপলভ্য করে দিয়েছি .. আমি কেন দেখি না যে প্রত্যেকের উপর কেন একটি বিধি চাপানো হয়েছে, মনে হচ্ছে পিসি পুলিশ শুরু করছে আমাদের দেব বিশ্বকেও দখল করতে ?!

— ওয়েবকিট

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

— Flor

Answer 3

আমি touch-actionপৃথক উপাদানগুলিতে CSS সম্পত্তি ব্যবহার করে এটি ঠিক করতে সক্ষম হয়েছি । touch-action: manipulation;লিঙ্ক বা বোতামের মতো সাধারণত ক্লিক করা উপাদানগুলিতে সেট করার চেষ্টা করুন ।

Comments

"ম্যানিপুলেশন" চিমটি জুম প্রতিরোধ করে না, কেবল জুমকে ডাবল ট্যাপ করুন।

— মুস

এটি গ্রহণযোগ্য উত্তর হওয়া উচিত। আপনি touch-action: none;নিজে সমস্ত অঙ্গভঙ্গি নিয়ন্ত্রণ করতে ব্যবহার করতে পারেন ।

— গাই সোফার

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

— ল্যারি

@GuySopher আইওএস নেই না প্রদান touch-action: noneশুধুমাত্র manipulatoin, যা পিঞ্চ-জুম সমস্যা ছেড়ে যেমন হয়।

— মানবতাঅ্যান্ডপিস

Answer 4

দেখা যাচ্ছে যে এই আচরণটি সম্ভবত সর্বশেষ বিটাতে পরিবর্তিত হয়েছে যা লেখার সময় বিটা 6।

আইওএস 10 বিটা 6 এর জন্য প্রকাশিত নোটগুলি থেকে:

WKWebViewএখন user-scalable=noভিউপোর্ট থেকে সম্মানের তুলনায় ডিফল্ট । এর ক্লায়েন্টরা WKWebViewঅ্যাক্সেসযোগ্যতা উন্নত করতে পারে এবং ব্যবহারকারীগুলিকে WKWebViewConfiguration সম্পত্তি সেট করে সমস্ত পৃষ্ঠায় চুন-টু-জুম ignoresViewportScaleLimitsকরতে দেয় YES।

যাইহোক, আমার (খুব সীমাবদ্ধ) পরীক্ষায়, আমি এখনও এটি কেস হওয়ার বিষয়টি নিশ্চিত করতে পারি না।

সম্পাদনা করুন: যাচাই করা হয়েছে, আইওএস 10 বিটা 6 user-scalable=noআমার জন্য ডিফল্টরূপে শ্রদ্ধা ।

Comments

10.0.1 এখানে। এটি সম্মান করে না। অ্যাপল এমন বৈশিষ্ট্যগুলি থেকে মুক্তি পাচ্ছে যা সবার প্রয়োজন ...

— লাইফওয়ানিয়ান

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

— ফ্যাবিও পোলোনি

আহা! দুঃখিত, আমি একই বাগ / বৈশিষ্ট্যটির সমাধানের সন্ধান করতে গিয়ে এখানে এসেছি WKWebViewএবং ধরণের অনুমান করা হয়েছিল যে WKWebViewআমার উত্তর লেখার সময় মূল প্রশ্নটি জিজ্ঞাসা করেছিল । সুতরাং আমি অনুমান করি যে প্রথম বিটা সংস্করণগুলির মধ্যে একটির মধ্যে, অ্যাপল উভয় WKWebViewএবং মোবাইল সাফারি উভয়ের আচরণ পরিবর্তন করেছিল , তারপরে বিটা 6-এ, তারা তাদের আচরণটি উল্টিয়ে দিয়েছে WKWebViewতবে এটি মোবাইল সাফারির জন্য রেখেছিল।

— সেলেন

10.0.2 সম্মান দেয় না user-scalable=no। আমি নিশ্চিত নই কেন তারা কখনই এটিকে পূর্বাবস্থায় ফিরিয়ে আনবে, কেবল এটিকে ফিরিয়ে আনতে, কেবল এটি আবার সরাতে।

— আইডন হাকিমিয়ান

Answer 5

এই সময়ে লেখার সময় মোবাইল সাফারিতে যে কার্যকারিতা কাজ করে, এটি তৃতীয় যুক্তিটি হওয়া addEventListenerউচিত { passive: false }, তাই সম্পূর্ণ কর্মক্ষেত্রটি দেখতে এই রকম হয়:

document.addEventListener('touchmove', function (event) {
  if (event.scale !== 1) { event.preventDefault(); }
}, { passive: false });

বিকল্পগুলি পিছনের দিকে সামঞ্জস্যপূর্ণ থাকতে সমর্থিত কিনা তা আপনি পরীক্ষা করতে চাইতে পারেন ।

Comments

আইওএস 12 এ কেউ কি চেষ্টা করেছে? আমি উপরের কোডটি যুক্ত করেছি এবং এটি আমার ওয়েবঅ্যাপের জন্য কিছুই করছে না। এখনও এই বোকা সাফারি জুম করতে সক্ষম। এই BTW আমার মেটা ভিউপোর্ট ট্যাগ দেখায়: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">।

— প্যাট্রিক দাভাদার

@ পেট্রিকডাভাডার ইয়েপ, আইওএস 12 সাফারির জন্য কোনও কাজের সমাধান খুঁজে পাচ্ছে না। সমস্ত অবিচ্ছিন্ন জুম থেকে সামুদ্রিক প্রাপ্তি।

— জেমি বার্চ

আইওএস 13. আমার <মেটা> এটির কাজ ট্যাগ অন্তর্ভুক্ত: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />এবং<meta name="HandheldFriendly" content="true">

— স্টার্লিং বোর্ন

@ স্টার্লিংবর্ন আপনার সেটআপটি অনুলিপি করেছেন কাজ করে তবে সময়টি 90% এর মতোই হয়। নিশ্চিত না কেন সব সময় নয়।

— হিলকো

@ স্টার্লিংবর্ন প্রতিক্রিয়া আমার পক্ষে কাজ করেছে! ধন্যবাদ। তাকে মন্তব্য হিসাবে উত্তর হিসাবে পোস্ট করা উচিত যাতে এটি <মেটা নাম = "ভিউপোর্ট" সামগ্রী = "প্রস্থ = ডিভাইস-প্রস্থ, প্রাথমিক-স্কেল = 1, সর্বাধিক স্কেল = 1, ভিউপোর্ট-ফিট = কভার, ব্যবহারকারী-স্কেলেবল = না, সঙ্কুচিত থেকে ফিট = না "/> এবং <মেটা নাম =" হ্যান্ডহেল্ডফ্রেন্ডলি "সামগ্রী =" সত্য ">

— জেন ব্ল্যাক

Answer 6

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

এই সতর্কতা সহ, এবং বোঝার সাথে আমি কোনও উপায়েই জাভাস্ক্রিপ্ট বিশেষজ্ঞ নই, এটিই একটি সমাধান যা আমি মূলত চিমটি-জুম এবং ডাবল-ট্যাপ ইভেন্টগুলি ক্যাপচারের জন্য হাতুড়ি.জেএসকে উপকৃত করি এবং তারপরে লগইন করে এবং এগুলি বাতিল করে দেয়।

নিশ্চিত করুন যে আপনি নিজের পৃষ্ঠায় হাতুড়ি.জেগুলি অন্তর্ভুক্ত করেছেন এবং তারপরে কোথাও এই জাভাস্ক্রিপ্টটি মাথায় চাপিয়ে দেওয়ার চেষ্টা করুন:

< script type = "text/javascript" src="http://hammerjs.github.io/dist/hammer.min.js"> < /script >
< script type = "text/javascript" >

  // SPORK - block pinch-zoom to force use of tooltip zoom
  $(document).ready(function() {

    // the element you want to attach to, probably a wrapper for the page
    var myElement = document.getElementById('yourwrapperelement');
    // create a new hammer object, setting "touchAction" ensures the user can still scroll/pan
    var hammertime = new Hammer(myElement, {
      prevent_default: false,
      touchAction: "pan"
    });

    // pinch is not enabled by default in hammer
    hammertime.get('pinch').set({
      enable: true
    });

    // name the events you want to capture, then call some function if you want and most importantly, add the preventDefault to block the normal pinch action
    hammertime.on('pinch pinchend pinchstart doubletap', function(e) {
      console.log('captured event:', e.type);
      e.preventDefault();
    })
  });
</script>

Comments

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

— কনান

Answer 7

আমি পিচ-টু-জুম সম্পর্কে আগের উত্তরটি চেষ্টা করেছিলাম

document.documentElement.addEventListener('touchstart', function (event) {
    if (event.touches.length > 1) {
        event.preventDefault();
    }
}, false);

যাইহোক, ইভেন্ট.টিউচেস.লেন্থ> 1 স্ক্রিনটিতে কোনও আঙুল এড়াতে এড়াতে টাচমোভ ইভেন্টটি ব্যবহার করার সবচেয়ে ভাল উপায়টি আমি খুঁজে পেয়েছি still কোডটি এরকম কিছু হবে:

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();      
}, false);

আশা করি এটি সাহায্য করবে।

Comments

এটি কেবল তখনই কাজ করে যদি আপনার অ্যাপটি নিখুঁত ফিট হয় ... আপনার কাছে যদি স্ক্রোলযোগ্য সামগ্রী থাকে তবে এটি কাজ করে না ... কিছু পরিস্থিতিতে এখনও দুর্দান্ত হ্যাক।

— এলজামজ

এটি এমনকি ওয়েবসাইটে স্ক্রোল অক্ষম করে .. বিএডি

— গ্যাগস

@ এলজামজ আমাকে জানাতে ধন্যবাদ এবং হ্যাঁ..আমার অ্যাপটি স্ক্রিনে নিখুঁত ফিট।

— চিহিইং উ

@ গ্যাগগুলি আমি এখনও স্ক্রোল ফাংশনটি পরীক্ষা করিনি, আমাকে জানাতে ধন্যবাদ।

— চিহিইং উ

Answer 8

টাচওয়ে ইভেন্টের স্কেল ফ্যাক্টরটির জন্য চেক করুন তারপরে স্পর্শ ইভেন্টটিকে প্রতিরোধ করুন।

document.addEventListener('touchmove', function(event) {
    event = event.originalEvent || event;
    if(event.scale > 1) {
        event.preventDefault();
    }
}, false);

Comments

আইওএস 13 টি মিথ্যাতে {প্যাসিভ: মিথ্যা}

— ওয়েফথিউফিউচার

Answer 9

আমরা একটি স্টাইলের নিয়ম ইনজেকশনের মাধ্যমে এবং জুম ইভেন্টগুলিতে বাধা দিয়ে আমরা যা কিছু পেতে চাই তা পেতে পারি:

$(function () {
  if (!(/iPad|iPhone|iPod/.test(navigator.userAgent))) return
  $(document.head).append(
    '<style>*{cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0)}</style>'
  )
  $(window).on('gesturestart touchmove', function (evt) {
    if (evt.originalEvent.scale !== 1) {
      evt.originalEvent.preventDefault()
      document.body.style.transform = 'scale(1)'
    }
  })
})

Pin চিমটি জুম অক্ষম করে।

Double ডাবল-ট্যাপ জুম অক্ষম করে।

✔ স্ক্রোল প্রভাবিত হয় না।

Tap স্টাইল বিধি দ্বারা ট্যাপ হাইলাইট (যা iOS এ ট্রিগার হয়) অক্ষম করে।

বিজ্ঞপ্তি: আপনার পছন্দ অনুসারে আইওএস-ডিটেকশনটি সাম্প্রতিক করুন। আরো বিষয়ে এখানে ।

---

লুকেজ্যাকসন এবং পাইওটর কোওলস্কির কাছে ক্ষমা , যার উত্তরগুলি উপরের কোডে পরিবর্তিত আকারে উপস্থিত।

Comments

এটি আমার আইপ্যাড এমুলেটরটিতে কাজ করে যা আইওএস 11.2 চলছে। আমার বাস্তব আইপ্যাডে আইওএস 11.3 চলছে On ইভেন্টগুলি চালিত হয়েছে তা নিশ্চিত করার জন্য আমি একটি কনসোল.লগ যুক্ত করেছি এবং যাতে তারা কনসোলে উপস্থিত হয়। আইওএস 11.3 এর সাথে কিছু করার আছে? বা বাস্তব ডিভাইস সহ?

— ম্যাথিউ আর।

@MathieuR। এটি একটি আইওএস 11.3 ইস্যু। addEventListenerভিত্তিক উত্তরগুলির মধ্যে একটি ব্যবহার করে এবং পরিবর্তে প্যারামিটার { passive: false }হিসাবে পাস করে এটি সংশোধন করা যায় । তবে, পশ্চাদপটে সামঞ্জস্যের জন্য অপশন ক্ষেত্রটি সমর্থন না করা অবধি আপনাকে পাস করতে হবে । বিকাশকারী.মোজিলা.অর্গ.ইন- optionsfalsefalsepassive

— জোশ গালাগের

@ জোশগালাগের আপনি কি একটি কাজের উদাহরণ প্রদান করতে পারেন? আইওএস 11-এ উত্তরগুলির কোনওটিই আমার পক্ষে কাজ করছে না।

— মিক

'অঙ্গভঙ্গি স্টার্ট' -> প্রতিরোধ ডিফল্ট আইওএস 12,2-এ লেখার সময় আমার জন্য কাজ করে

— মাইকেল ক্যামডেন

Answer 10

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

ধারণাটি হ'ল প্রথম touchstartএবং দ্বিতীয়টির touchendমধ্যে একটি দ্বৈত ট্যাপের মধ্যে সময় পরিমাপ করা এবং তারপরে touchendবিলম্বটি খুব কম হলে ক্লিকটিকে শেষ হিসাবে ব্যাখ্যা করা । দুর্ঘটনাজনিত জুমিং প্রতিরোধ করার সময়, এই পদ্ধতিটি তালিকাটিকে স্ক্রোলিংটিকে প্রভাবিত না করা বলে মনে হচ্ছে, যা দুর্দান্ত। যদিও আমি কিছু মিস না করেছি তা নিশ্চিত নয়।

let preLastTouchStartAt = 0;
let lastTouchStartAt = 0;
const delay = 500;

document.addEventListener('touchstart', () => {
  preLastTouchStartAt = lastTouchStartAt;
  lastTouchStartAt = +new Date();
});
document.addEventListener('touchend', (event) => {
  const touchEndAt = +new Date();
  if (touchEndAt - preLastTouchStartAt < delay) {
    event.preventDefault();
    event.target.click();
  }
});

মুটিউইন্টার এবং জোসেফের উত্তরের সংক্ষেপে অনুপ্রাণিত ।

Answer 11

আমার বিশেষ ক্ষেত্রে, আমি ব্যাবিলেন.জেএস ব্যবহার করছি একটি 3 ডি দৃশ্য তৈরি করতে এবং আমার পুরো পৃষ্ঠাটিতে একটি সম্পূর্ণ স্ক্রিনের ক্যানভাস রয়েছে। 3 ডি ইঞ্জিনটির নিজস্ব জুমিং কার্যকারিতা রয়েছে তবে আইওএসে চিমটি থেকে জুম এর সাথে হস্তক্ষেপ করে। আমি আমার সমস্যাটি কাটিয়ে উঠতে @ জোসেফ উত্তরটি আপডেট করেছি। এটি অক্ষম করতে, আমি বুঝতে পেরেছিলাম যে ইভেন্ট শ্রোতার বিকল্প হিসাবে আমার {প্যাসিভ: ভুয়া pass পাস করতে হবে। নিম্নলিখিত কোডটি আমার পক্ষে কাজ করে:

window.addEventListener(
    "touchmove",
    function(event) {
        if (event.scale !== 1) {
            event.preventDefault();
        }
    },
    { passive: false }
);

Comments

আমার ব্যবহারের ক্ষেত্রে কাস্টম চিম্টি নিয়ন্ত্রণ সহ একটি পূর্ণ পৃষ্ঠা 3 ডি দৃশ্য। আমি যদি ডুবে যেতাম যদি অ্যাপলের কোনও ব্যবহারকারীর ভিত্তি স্পষ্টভাবে ব্যবহারকারীর স্কেল উপেক্ষা করতে না পারে: কোনও মেটা নেই।

— নিক বিলাইক

Answer 12

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

1. অনক্লিক শ্রোতা - এটি একটি সহজ নূপ হতে পারে।
2. cursor: pointerসিএসএসে একটি সেট

Comments

কিভাবে চিম্টি সম্পর্কে?

— স্যাম সু

দুর্ভাগ্যক্রমে, চিমটি থেকে জুম করা এই সমাধানটি দ্বারা আচ্ছাদিত নয়। : যে, আমরা সমাধান প্রস্তাব ব্যবহৃত stackoverflow.com/a/39594334/374196

— mariomc

আমার জন্য কাজ করে না। আমি এই পরীক্ষার পৃষ্ঠাটি ব্যবহার করে একটি আইপড টাচে 10.2.1 বিটা 4 ব্যবহার করছি এবং ধূসর বর্গক্ষেত্রের কোনও জুমকে

— রোবোকট

আমার একটি প্রতিক্রিয়া অ্যাপ্লিকেশনটিতে এটি রয়েছে এবং এটি কার্যকর হয় না।

— এফএমডি

Answer 13

অনিচ্ছাকৃত জুমিং যখন ঘটে:

• ইন্টারফেসের একটি উপাদানটিতে একটি ব্যবহারকারী ডাবল ট্যাপ করে
• একজন ব্যবহারকারী দুই বা ততোধিক অঙ্ক ব্যবহার করে ভিউপোর্টের সাথে ইন্টারঅ্যাক্ট করে (চিমটি)

ডাবল ট্যাপ আচরণটি রোধ করতে আমি দুটি খুব সাধারণ কাজের সন্ধান পেয়েছি:

<button onclick='event.preventDefault()'>Prevent Default</button>
<button style='touch-action: manipulation'>Touch Action Manipulation</button>

এই উভয়ই সাফারি (আইওএস 10.3.2) বোতামে জুম করা থেকে বাধা দেয়। আপনি দেখতে পাচ্ছেন একটি কেবল জাভাস্ক্রিপ্ট, অন্যটি কেবল সিএসএস। যথাযথভাবে ব্যবহার করুন।

এখানে একটি ডেমো রয়েছে: https://codepen.io/lukejacksonn/pen/QMELXQ

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

Answer 14

জুম করতে ডাবল ক্লিক প্রতিরোধ করতে দেখা যায় যার চারপাশে এই সাধারণ কাজটি পাওয়া গেছে:

    // Convert touchend events to click events to work around an IOS 10 feature which prevents
    // developers from using disabling double click touch zoom (which we don't want).
    document.addEventListener('touchend', function (event) {
        event.preventDefault();
        $(event.target).trigger('click');
    }, false);

Answer 15

অনুরোধ হিসাবে, আমি আমার মন্তব্যে একটি উত্তরে স্থানান্তরিত করেছি যাতে লোকেরা এটির উন্নতি করতে পারে:

এটি আইওএস 13 এর 90% সময় কাজ করে:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />

এবং

<meta name="HandheldFriendly" content="true">

Answer 16

আমি আমার পৃষ্ঠায় আইওএস (আইফোন 6, আইওএস 10.0.2) এর সাহায্যে উপরের সমস্ত উত্তরগুলি পরীক্ষা করে দেখেছি, তবে কোনও সাফল্যই পাইনি। এটি আমার কাজের সমাধান:

$(window).bind('gesturestart touchmove', function(event) {
    event = event.originalEvent || event;
    if (event.scale !== 1) {
         event.preventDefault();
         document.body.style.transform = 'scale(1)'
    }
});

Comments

দুর্ভাগ্যক্রমে এটি তখনই কাজ করে যখন আপনার পৃষ্ঠাটি উপযুক্ত উপযুক্ত, যখন আপনার স্ক্রোলযোগ্য সামগ্রী থাকবে না

— জুতো

হুম। এটি আমার অভিজ্ঞতা (আইওএস 10.3) এ স্ক্রোলযোগ্য সামগ্রী সহ সূক্ষ্মভাবে কাজ করে।

— jeff_mcmahan

Answer 17

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

document.documentElement.addEventListener('touchmove', function (event) {
    event.preventDefault();
}, false);

Comments

আমি এটি চেষ্টা করেছিলাম, এটি চিম্টি জুমিং প্রতিরোধ করেছিল, তবে এটি ভিউপোর্টের স্পর্শ স্ক্রোলিংটিকে অক্ষম করে যাতে আপনি আর পৃষ্ঠাটি উপরে এবং নীচে স্ক্রোল করতে পারবেন না।

— টিজিআর