টাচস্ক্রিন ডিভাইসে না থাকাকালীন কিছু ঘটানোর জন্য মিডিয়া ক্যোয়ারীগুলি ব্যবহার করে, নিরাপদতম উপায় কী? যদি কোনও উপায় না থাকে, আপনি কি জাভাস্ক্রিপ্ট সমাধান যেমন !window.Touchবা মডার্নজার ব্যবহার করার পরামর্শ দিচ্ছেন ?
উত্তর:
আমি আধুনিকীকরণ ব্যবহার এবং এর মিডিয়া ক্যোয়ারী বৈশিষ্ট্যগুলি ব্যবহার করার পরামর্শ দেব ।
if (Modernizr.touch){
// bind to touchstart, touchmove, etc and watch `event.streamId`
} else {
// bind to normal click, mousemove, etc
}তবে, সিএসএস ব্যবহার করে সিউডো ক্লাস যেমন ফায়ারফক্সে রয়েছে। আপনি ব্যবহার করতে পারেন : -মুজ-সিস্টেম-মেট্রিক (টাচ-সক্ষম) । তবে এই বৈশিষ্ট্যগুলি প্রতিটি ব্রাউজারের জন্য উপলব্ধ নয়।
জন্য অ্যাপল ডিভাইস, আপনাকে সহজ ব্যবহার করতে পারেন:
if(window.TouchEvent) {
//.....
}বিশেষত আইপ্যাডের জন্য:
if(window.Touch) {
//....
}তবে, এগুলি অ্যান্ড্রয়েডে কাজ করে না ।
মডার্নিজার বৈশিষ্ট্য সনাক্তকরণের ক্ষমতা দেয় এবং ব্রাউজারগুলির ভিত্তিতে কোডিংয়ের পরিবর্তে বৈশিষ্ট্যগুলি সনাক্তকরণ কোডের একটি ভাল উপায়।
মডার্নাইজার এই সঠিক উদ্দেশ্যে HTML ট্যাগে ক্লাস যুক্ত করে। এই ক্ষেত্রে, touchএবং no-touchতাই আপনি আপনার নির্বাচকদের .touch সহ উপস্থাপন করে আপনার স্পর্শ সম্পর্কিত দিকগুলি স্টাইল করতে পারেন। যেমন .touch .your-container। ক্রেডিট: বেন সুইনবার্ন
modernizrনিখুঁত হবে :)
Modernizr.touchপরীক্ষা শুধুমাত্র ইঙ্গিত যদি ব্রাউজার সমর্থন করে ঘটনা, যা অগত্যা একটি টাচস্ক্রীন ডিভাইস প্রতিফলিত না স্পর্শ করুন। উদাহরণস্বরূপ, পাম প্রি / ওয়েবস (টাচ) ফোনগুলি স্পর্শ ইভেন্টগুলিকে সমর্থন করে না এবং এইভাবে এই পরীক্ষায় ব্যর্থ হয়।
touchএবং no-touchতাই আপনি আপনার নির্বাচকদের সাথে উপসর্গ রেখে আপনার স্পর্শ সম্পর্কিত দিকগুলি স্টাইল করতে পারেন .touch। উদা.touch .your-container
CSS4 মিডিয়া ক্যোয়ারী খসড়াটিতে এর জন্য আসলে একটি সম্পত্তি রয়েছে ।
'পয়েন্টার' মিডিয়া বৈশিষ্ট্যটি মাউসের মতো পয়েন্টিং ডিভাইসের উপস্থিতি এবং যথার্থতার সম্পর্কে জিজ্ঞাসা করতে ব্যবহৃত হয়। যদি কোনও ডিভাইসে একাধিক ইনপুট মেকানিজম থাকে তবে এটি প্রস্তাবিত হয় যে সংযুক্ত আরব আমিরাত প্রাথমিক ইনপুট পদ্ধতিগুলির কমপক্ষে সক্ষম পয়েন্টিং ডিভাইসের বৈশিষ্ট্যগুলি প্রতিবেদন করে। এই মিডিয়া ক্যোয়ারী নিম্নলিখিত মানগুলি নিয়েছে:
'কিছুই নয়'
- ডিভাইসের ইনপুট প্রক্রিয়াটিতে কোনও পয়েন্টিং ডিভাইস অন্তর্ভুক্ত থাকে না।'মোটা'
- ডিভাইসের ইনপুট প্রক্রিয়াটিতে সীমিত নির্ভুলতার পয়েন্টিং ডিভাইস অন্তর্ভুক্ত।'ফাইন'
- ডিভাইসের ইনপুট প্রক্রিয়াটিতে একটি সঠিক পয়েন্টিং ডিভাইস অন্তর্ভুক্ত থাকে।
এটি যেমন ব্যবহার করা হবে:
/* Make radio buttons and check boxes larger if we have an inaccurate pointing device */
@media (pointer:coarse) {
input[type="checkbox"], input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
}এটি সম্পর্কিত ক্রোমিয়াম প্রকল্পে একটি টিকিটও পেয়েছি ।
ব্রাউজারের সামঞ্জস্যতা এখানে পরীক্ষা করা যেতে পারে Quirksmode । এগুলি আমার ফলাফল (22 জানু 2013):
সিএসএস সমাধানগুলি 2013 সালের মাঝামাঝি পর্যন্ত ব্যাপকভাবে উপলব্ধ বলে মনে হচ্ছে না। পরিবর্তে...
নিকোলাস জাকাস ব্যাখ্যা করেছেন যে no-touchব্রাউজারটি স্পর্শ সমর্থন না করলে মডার্নিজার একটি সিএসএস শ্রেণি প্রয়োগ করে।
বা জাভাস্ক্রিপ্টে একটি সাধারণ কোডের টুকরো সহ সনাক্ত করুন, যা আপনাকে নিজের নিজস্ব আধুনিকীকরণের মতো সমাধানটি প্রয়োগ করতে দেয়:
<script>
document.documentElement.className +=
(("ontouchstart" in document.documentElement) ? ' touch' : ' no-touch');
</script>তারপরে আপনি নিজের সিএসএস লিখতে পারেন:
.no-touch .myClass {
...
}
.touch .myClass {
...
}মিডিয়া প্রকারগুলি আপনাকে স্ট্যান্ডার্ডের অংশ হিসাবে স্পর্শ ক্ষমতা সনাক্ত করতে দেয় না:
http://www.w3.org/TR/css3-mediaqueries/
সুতরাং, এটি সিএসএস বা মিডিয়া প্রশ্নের মাধ্যমে ধারাবাহিকভাবে করার কোনও উপায় নেই , আপনাকে জাভাস্ক্রিপ্টের অবলম্বন করতে হবে।
মডার্নিজার ব্যবহার করার দরকার নেই, আপনি কেবল প্লেইন জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন:
<script type="text/javascript">
var is_touch_device = 'ontouchstart' in document.documentElement;
if(is_touch_device) alert("touch is enabled!");
</script>window.touch&& window.TouchEventআপেল ডিভাইসের জন্য শুধুমাত্র হবে।
2017 সালে, দ্বিতীয় উত্তর থেকে সিএসএস মিডিয়া ক্যোয়ারী এখনও ফায়ারফক্সে কাজ করে না। আমি এর জন্য একটি দ্রাবক খুঁজে পেয়েছি: -মুজ-টাচ-সক্ষম
সুতরাং, এখানে ক্রস ব্রাউজার মিডিয়া ক্যোয়ারী রয়েছে:
@media (-moz-touch-enabled: 1), (pointer:coarse) {
.something {
its: working;
}
}-moz-touch-enabled
-moz-touch-enabledফায়ারফক্স 58+ তে সমর্থিত নয়। যেমনটি রয়েছে, এই সমাধানটি ফায়ারফক্স 58-63 কভার করে না (যেহেতু ফায়ারফক্স +৪++ পয়েন্টার ক্যোয়ারিকে সমর্থন করে)। সূত্র: ডেভেলপার.মোজিলা.আর.ইন-
আসলে এটির জন্য একটি মিডিয়া ক্যোয়ারী রয়েছে:
@media (hover: none) { … }ফায়ারফক্স ছাড়াও এটি মোটামুটিভাবে সমর্থিত । সাফারি এবং ক্রোম মোবাইল ডিভাইসে সর্বাধিক সাধারণ ব্রাউজার হওয়ায় এটি আরও বেশি গ্রহণের পক্ষে যথেষ্ট ice
CSS4 বিশ্বব্যাপী সমস্ত ব্রাউজার দ্বারা সমর্থিত না হওয়া পর্যন্ত এই সমাধানটি কাজ করবে is যখন দিনটি আসে তখন কেবল CSS4 ব্যবহার করুন। তবে ততক্ষণে এটি বর্তমান ব্রাউজারগুলির জন্য কাজ করে।
ব্রাউজার-util.js
export const isMobile = {
android: () => navigator.userAgent.match(/Android/i),
blackberry: () => navigator.userAgent.match(/BlackBerry/i),
ios: () => navigator.userAgent.match(/iPhone|iPad|iPod/i),
opera: () => navigator.userAgent.match(/Opera Mini/i),
windows: () => navigator.userAgent.match(/IEMobile/i),
any: () => (isMobile.android() || isMobile.blackberry() ||
isMobile.ios() || isMobile.opera() || isMobile.windows())
};ভার:
পুরানো উপায়:
isMobile.any() ? document.getElementsByTagName("body")[0].className += 'is-touch' : null;আরও নতুন উপায়:
isMobile.any() ? document.body.classList.add('is-touch') : null;উপরের কোডটি ডিভাইসের টাচ স্ক্রিন থাকলে বডি ট্যাগটিতে "ইস-টাচ" শ্রেণি যুক্ত করবে। আপনার ওয়েব অ্যাপ্লিকেশনটিতে এখন যে কোনও অবস্থানের জন্য আপনি সিএসএস পাবেন: হোভার আপনি কল করতে পারেনbody:not(.is-touch) the_rest_of_my_css:hover
উদাহরণ স্বরূপ:
button:hoverহয়ে:
body:not(.is-touch) button:hoverএই সমাধানটি আধুনিকীকরণ ব্যবহার করা এড়ানো যায় কারণ আধুনিকীকরণ একটি খুব বড় লাইব্রেরি। আপনি যা করতে চেষ্টা করছেন তা যদি সমস্ত স্পর্শের পর্দা সনাক্ত করে তবে চূড়ান্ত সংকলিত উত্সের আকার যখন প্রয়োজন হয় তখন এটি সর্বোত্তম হবে।
আমি এটি ব্যবহার করে এই সমস্যাটি সমাধান করতে সক্ষম হয়েছি
@media (hover:none), (hover:on-demand) {
Your class or ID{
attributes
}
}on-demand থেকে এবং ব্রাউজারগুলি থেকে সরানো হয়েছে: github.com/w3c/csswg-drafts/commit/…