আমার জন্য ছোট সুন্দর তাই আমি এই কৌশলটি ব্যবহার করছি:
সিএসএস ফাইলে:
/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
#some-element { display: none; }
}
JQuery / জাভাস্ক্রিপ্ট ফাইলটিতে:
$( document ).ready(function() {
var is_mobile = false;
if( $('#some-element').css('display')=='none') {
is_mobile = true;
}
// now i can use is_mobile to run javascript conditionally
if (is_mobile == true) {
//Conditional script here
}
});
আমার উদ্দেশ্য ছিল আমার সাইটের "মোবাইল বান্ধব" হওয়া। সুতরাং আমি সিএসএস মিডিয়া ক্যোয়ারীগুলি স্ক্রিনের আকারের উপর নির্ভর করে উপাদানগুলি প্রদর্শন / গোপন করতে ব্যবহার করি।
উদাহরণস্বরূপ, আমার মোবাইল সংস্করণে আমি ফেসবুকের মতো বাক্স সক্রিয় করতে চাই না, কারণ এটি সেই সমস্ত প্রোফাইল চিত্র এবং স্টাফ লোড করে দেয়। এবং এটি মোবাইল দর্শকদের পক্ষে ভাল নয়। সুতরাং, ধারক উপাদানটি আড়াল করার পাশাপাশি, আমি jQuery কোড ব্লকের ভিতরে (উপরে) এটিও করি:
if(!is_mobile) {
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
}
আপনি এটি http://lisboaautentica.com এ কর্মে দেখতে পাবেন
আমি এখনও মোবাইল সংস্করণে কাজ করছি, সুতরাং এটি লেখার মতো এখনও এটি দেখতে পাচ্ছে না।
Dekin88 দ্বারা আপডেট
মিডিয়া সনাক্ত করার জন্য একটি জাভাস্ক্রিপ্ট এপিআই রয়েছে। উপরের সমাধানটি ব্যবহার না করে কেবল নিম্নলিখিতটি ব্যবহার করুন:
$(function() {
let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//Conditional script here
}
});
ব্রাউজার সমর্থন করে: http://caniuse.com/#feat=matchmedia
এই পদ্ধতির সুবিধাটি হ'ল এটি কেবল সহজ এবং খাটো নয়, আপনি ডিএমএমে কোনও ডামি উপাদান যুক্ত না করে শর্তাধীন বিভিন্ন ডিভাইস যেমন স্মার্টফোন এবং ট্যাবলেটগুলি আলাদাভাবে লক্ষ্যবস্তু করতে পারেন।