এখন , টুইটার বুটস্ট্র্যাপ 3 এর নিম্নলিখিত প্রতিক্রিয়াশীল ব্রেকপয়েন্ট রয়েছে: যথাক্রমে ছোট, মাঝারি এবং বৃহত ডিভাইসগুলির প্রতিনিধিত্ব করে .6868px, 992px এবং 1200px।
আমি কীভাবে জাভাস্ক্রিপ্ট ব্যবহার করে এই ব্রেকপয়েন্টগুলি সনাক্ত করতে পারি?
স্ক্রিন পরিবর্তন হওয়ার সাথে সাথে সম্পর্কিত সমস্ত ইভেন্টের জন্য আমি জাভাস্ক্রিপ্টের সাথে শুনতে চাই। এবং স্ক্রিনটি ছোট, মাঝারি বা বড় ডিভাইসের জন্য কিনা তা সনাক্ত করতে সক্ষম হতে।
ইতিমধ্যে কিছু হয়েছে? আপনার পরামর্শ কি?
উত্তর:
সম্পাদনা করুন: এই পাঠাগারটি এখন বোভার এবং এনপিএমের মাধ্যমে উপলব্ধ। বিশদ জন্য গিথুব রেপো দেখুন।
আপডেট উত্তর:
দাবি অস্বীকার: আমি লেখক।
সর্বশেষ সংস্করণটি ব্যবহার করার জন্য কয়েকটি জিনিস এখানে দেওয়া হয়েছে (প্রতিক্রিয়াশীল বুটস্ট্র্যাপ টুলকিট ২.০.০):
// Wrap everything in an IIFE
(function($, viewport){
// Executes only in XS breakpoint
if( viewport.is('xs') ) {
// ...
}
// Executes in SM, MD and LG breakpoints
if( viewport.is('>=sm') ) {
// ...
}
// Executes in XS and SM breakpoints
if( viewport.is('<md') ) {
// ...
}
// Execute only after document has fully loaded
$(document).ready(function() {
if( viewport.is('xs') ) {
// ...
}
});
// Execute code each time window size changes
$(window).resize(
viewport.changed(function() {
if( viewport.is('xs') ) {
// ...
}
})
);
})(jQuery, ResponsiveBootstrapToolkit);সংস্করণ ২.৩.০ অনুসারে, আপনাকে <div>নীচে বর্ণিত চারটি উপাদানের প্রয়োজন নেই।
মূল উত্তর:
আমি মনে করি না যে এর জন্য আপনার কোনও বিশাল স্ক্রিপ্ট বা গ্রন্থাগার দরকার। এটি মোটামুটি সহজ কাজ।
নীচের উপাদানগুলি ঠিক আগে sertোকান </body>:
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>এই 4 টি ডিভ আপনাকে বর্তমানে সক্রিয় ব্রেকপয়েন্টের জন্য পরীক্ষা করতে দেয় allow একটি সহজ জেএস সনাক্তকরণের জন্য, নিম্নলিখিত ফাংশনটি ব্যবহার করুন:
function isBreakpoint( alias ) {
return $('.device-' + alias).is(':visible');
}এখন আপনি যে ক্ষুদ্রতম ব্রেকপয়েন্টটি ব্যবহার করতে পারেন কেবল সেটিতে একটি নির্দিষ্ট ক্রিয়া সম্পাদন করতে:
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}DOM প্রস্তুতের পরে পরিবর্তনগুলি সনাক্ত করাও মোটামুটি সহজ। আপনার যা দরকার তা হ'ল লাইটওয়েটের উইন্ডোর আকার পরিবর্তনকারী শ্রোতার মতো:
var waitForFinalEvent = function () {
var b = {};
return function (c, d, a) {
a || (a = "I am a banana!");
b[a] && clearTimeout(b[a]);
b[a] = setTimeout(c, d)
}
}();
var fullDateString = new Date();একবার আপনি এটিতে সজ্জিত হয়ে গেলে, আপনি পরিবর্তনগুলি শুনতে শুরু করতে পারেন এবং ব্রেকআপপয়েন্ট-নির্দিষ্ট ফাংশনগুলি কার্যকর করতে পারেন:
$(window).resize(function () {
waitForFinalEvent(function(){
if( isBreakpoint('xs') ) {
$('.someClass').css('property', 'value');
}
}, 300, fullDateString.getTime())
});আপনার নির্দিষ্ট চাহিদা না থাকলে আপনি কেবল এটি করতে পারেন:
if ($(window).width() < 768) {
// do something for small screens
}
else if ($(window).width() >= 768 && $(window).width() <= 992) {
// do something for medium screens
}
else if ($(window).width() > 992 && $(window).width() <= 1200) {
// do something for big screens
}
else {
// do something for huge screens
}সম্পাদনা: আপনার বুটস্ট্র্যাপ প্রকল্পে ইতিমধ্যে অন্তর্ভুক্ত jQuery দিয়ে আপনি যখন এটি করতে পারেন তখন কেন আপনাকে অন্য জেএস লাইব্রেরি ব্যবহার করা উচিত তা আমি দেখতে পাই না।
$(window).bind('resize')... তবে মোবাইল স্ক্রিন ওরিয়েন্টেশনের সাথে সম্পর্কিত অন্যান্য ইভেন্টগুলি রয়েছে যা স্ক্রিনের মাত্রাকে প্রভাবিত করে।
.on('resize')
আপনি কি রেসপন্স.জেজে একবার দেখেছেন? এটি এই ধরণের জিনিসটির জন্য তৈরি করা হয়েছে। রেসপন্স.ব্যান্ড এবং রেসপন্স.রেসাইজ একত্রিত করুন।
Response.resize(function() {
if ( Response.band(1200) )
{
// 1200+
}
else if ( Response.band(992) )
{
// 992+
}
else if ( Response.band(768) )
{
// 768+
}
else
{
// 0->768
}
});আপনি উইন্ডোর আকার এবং হার্ড কোড ব্রেকপয়েন্টগুলি ব্যবহার করতে পারেন। কৌণিক ব্যবহার:
angular
.module('components.responsiveDetection', [])
.factory('ResponsiveDetection', function ($window) {
return {
getBreakpoint: function () {
var w = $window.innerWidth;
if (w < 768) {
return 'xs';
} else if (w < 992) {
return 'sm';
} else if (w < 1200) {
return 'md';
} else {
return 'lg';
}
}
};
});বুটস্ট্র্যাপ v.4.0.0 (এবং সর্বশেষ সংস্করণ বুটস্ট্র্যাপ 4.1.x ) আপডেট চালু গ্রিড অপশন , তাই সনাক্তকরণ পুরানো ধারণা সরাসরি (দেখুন প্রয়োগ করা যাবে না মাইগ্রেশন নির্দেশাবলী ):
smনীচে একটি নতুন গ্রিড স্তর যুক্ত করা হয়েছে 768px। আমরা এখন আছে xs, sm, md, lg, এবং xl;xs গ্রীক ক্লাসগুলি ইনফিক্সের প্রয়োজন না হওয়ার জন্য পরিবর্তন করা হয়েছে।আমি একটি ছোট্ট ইউটিলিটি ফাংশন লিখেছি যা একটি আপডেট হওয়া গ্রিড শ্রেণীর নাম এবং একটি নতুন গ্রিড স্তরকে সম্মান করে:
/**
* Detect the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = {xs:"d-none", sm:"d-sm-none", md:"d-md-none", lg:"d-lg-none", xl:"d-xl-none"};
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = Object.keys(envs).length - 1; i >= 0; i--) {
env = Object.keys(envs)[i];
$el.addClass(envs[env]);
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
};বুটস্ট্র্যাপ V4-আলফা এবং বুটস্ট্র্যাপ V4-বিটা গ্রিড ব্রেকপয়েন্ট বিভিন্ন পদ্ধতির ছিল, তাই এখানে একই অর্জনের উত্তরাধিকার উপায় আছে:
/**
* Detect and return the current active responsive breakpoint in Bootstrap
* @returns {string}
* @author farside {@link https://stackoverflow.com/users/4354249/farside}
*/
function getResponsiveBreakpoint() {
var envs = ["xs", "sm", "md", "lg"];
var env = "";
var $el = $("<div>");
$el.appendTo($("body"));
for (var i = envs.length - 1; i >= 0; i--) {
env = envs[i];
$el.addClass("d-" + env + "-none");;
if ($el.is(":hidden")) {
break; // env detected
}
}
$el.remove();
return env;
}আমি মনে করি এটি কার্যকর হবে, যেহেতু এটি কোনও প্রকল্পের সাথে সংহত করা সহজ। এটি নিজে বুটস্ট্র্যাপের নেটিভ রেসপন্সিভ ডিসপ্লে ক্লাস ব্যবহার করে।
এখানে আমার নিজস্ব সহজ সমাধান:
JQuery:
function getBootstrapBreakpoint(){
var w = $(document).innerWidth();
return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}VanillaJS:
function getBootstrapBreakpoint(){
var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
return (w < 768) ? 'xs' : ((w < 992) ? 'sm' : ((w < 1200) ? 'md' : 'lg'));
}সঙ্গে এই পদ্ধতির ব্যবহার করে Response.js উত্তম। রেসপন্স.রেসাইজ প্রতিটি উইন্ডোর পুনরায় আকারে ট্রিগার শুরু করে যেখানে ব্রেকপয়েন্ট পরিবর্তন করা হলে ক্রসওভারটি কেবল ট্রিগার হবে
Response.create({
prop : "width",
breakpoints : [1200, 992, 768, 480, 320, 0]
});
Response.crossover('width', function() {
if (Response.band(1200)) {
// 1200+
} else if (Response.band(992)) {
// 992+
} else if (Response.band(768)) {
// 768+
} else if (Response.band(480)) {
//480+
} else {
// 0->320
}
});
Response.ready(function() {
$(window).trigger('resize');
});@Oozic দ্বারা উল্লিখিত মতো কিছু ম্যানুয়াল বাস্তবায়ন নিয়ে কোনও সমস্যা হবে না।
এখানে কয়েকটি দাবী আপনি একবার দেখে নিতে পারেন:
নোট করুন যে এই লিবগুলি বুটস্ট্র্যাপ, ফাউন্ডেশন ইত্যাদির স্বাধীনভাবে কাজ করার জন্য ডিজাইন করা হয়েছে আপনি নিজের ব্রেকপয়েন্টগুলি কনফিগার করতে পারেন এবং মজা করতে পারেন।
দৃশ্যমানভাবে সক্রিয় ব্রেকপয়েন্টটি পরীক্ষা করতে আপনি এটি আপনার বুটস্ট্র্যাপ প্রকল্পে যুক্ত করতে চাইতে পারেন
<script type='text/javascript'>
$(document).ready(function () {
var mode;
$('<div class="mode-informer label-info" style="z-index:1000;position: fixed;bottom:10px;left:10px">%mode%</div>').appendTo('body');
var checkMode = function () {
if ($(window).width() < 768) {
return 'xs';
}
else if ($(window).width() >= 768 && $(window).width() < 992) {
return 'sm';
}
else if ($(window).width() >= 992 && $(window).width() < 1200) {
return 'md';
}
else {
return 'lg';
}
};
var compareMode = function () {
if (mode !== checkMode()) {
mode = checkMode();
$('.mode-informer').text(mode).animate({
bottom: '100'
}, 100, function () {
$('.mode-informer').animate({bottom: 10}, 100)
});
}
};
$(window).on('resize', function () {
compareMode()
});
compareMode();
});
</script>এখানে বুটপ্লে রয়েছে
ম্যাকিয়েজ গুরবানের উত্তরের ভিত্তিতে বিল্ডিং (যা দুর্দান্ত ... যদি আপনি এটি পছন্দ করেন তবে দয়া করে তার উত্তরটি দিয়ে দিন)। আপনি যদি কোয়েরিতে কোনও পরিষেবা তৈরি করে থাকেন তবে নীচের সেটআপ দিয়ে আপনি বর্তমানে সক্রিয় পরিষেবাটি ফিরিয়ে দিতে পারবেন। এটি সম্পূর্ণরূপে অন্যান্য ব্রেক-পয়েন্ট সনাক্তকরণ গ্রন্থাগারগুলিকে প্রতিস্থাপন করতে পারে (যেমন কিছু ইভেন্ট রাখলে এনকায়ার.জেএস)। নোট করুন যে আমি DOM ট্র্যাভারসাল গতি বাড়ানোর জন্য DOM উপাদানগুলিতে একটি আইডি সহ একটি ধারক যুক্ত করেছি।
এইচটিএমএল
<div id="detect-breakpoints">
<div class="breakpoint device-xs visible-xs"></div>
<div class="breakpoint device-sm visible-sm"></div>
<div class="breakpoint device-md visible-md"></div>
<div class="breakpoint device-lg visible-lg"></div>
</div>COFFEEScriptT (AngularJS, তবে এটি সহজে রূপান্তরযোগ্য)
# this simple service allows us to query for the currently active breakpoint of our responsive app
myModule = angular.module('module').factory 'BreakpointService', ($log) ->
# alias could be: xs, sm, md, lg or any over breakpoint grid prefix from Bootstrap 3
isBreakpoint: (alias) ->
return $('#detect-breakpoints .device-' + alias).is(':visible')
# returns xs, sm, md, or lg
getBreakpoint: ->
currentBreakpoint = undefined
$visibleElement = $('#detect-breakpoints .breakpoint:visible')
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']]
# note: _. is the lodash library
_.each breakpointStringsArray, (breakpoint) ->
if $visibleElement.hasClass(breakpoint[0])
currentBreakpoint = breakpoint[1]
return currentBreakpointজাভাস্ক্রিপ্ট (কৌণিক জেএস)
var myModule;
myModule = angular.module('modules').factory('BreakpointService', function($log) {
return {
isBreakpoint: function(alias) {
return $('#detect-breakpoints .device-' + alias).is(':visible');
},
getBreakpoint: function() {
var $visibleElement, breakpointStringsArray, currentBreakpoint;
currentBreakpoint = void 0;
$visibleElement = $('#detect-breakpoints .breakpoint:visible');
breakpointStringsArray = [['device-xs', 'xs'], ['device-sm', 'sm'], ['device-md', 'md'], ['device-lg', 'lg']];
_.each(breakpointStringsArray, function(breakpoint) {
if ($visibleElement.hasClass(breakpoint[0])) {
currentBreakpoint = breakpoint[1];
}
});
return currentBreakpoint;
}
};
});$ (দস্তাবেজ)। প্রস্থ () ব্যবহার করার পরিবর্তে, আপনার একটি সিএসএস বিধি সেট করা উচিত যা আপনাকে এই তথ্য দেয়।
আমি এটি নিখুঁতভাবে পেতে একটি নিবন্ধ লিখেছি। এটি এখানে দেখুন: http://www.xurei-design.be/2013/10/how-to-accurately-detect- দায়িত্বজ্ঞানহীন- ব্রেকিংপয়েন্টস /
বুটস্ট্র্যাপ ধারক শ্রেণীর বর্তমান সিএসএস প্রস্থ সনাক্ত করতে কেবল jQuery ব্যবহার করবেন না কেন?
অর্থাত ..
if( parseInt($('#container').css('width')) > 1200 ){
// do something for desktop screens
}যদি কেউ ব্রাউজার উইন্ডোটির আকার পরিবর্তন করে তবে আপনার বিছানাটিকে "বিছানায় মাটি কাটা" থেকে আটকাতে আপনি $ (উইন্ডো) .resize () ব্যবহার করতে পারেন।
প্রতিটি পৃষ্ঠায় নীচে অনেক বার ofোকানোর পরিবর্তে ...
<div class="device-xs visible-xs"></div>
<div class="device-sm visible-sm"></div>
<div class="device-md visible-md"></div>
<div class="device-lg visible-lg"></div>এটি প্রতিটি পৃষ্ঠায় গতিশীল icallyোকাতে কেবল জাভাস্ক্রিপ্ট ব্যবহার করুন (নোট করুন যে আমি এটি আপডেট করে বুটস্ট্র্যাপ 3 এর সাথে কাজ করতে .visible-*-block:
// Make it easy to detect screen sizes
var bootstrapSizes = ["xs", "sm", "md", "lg"];
for (var i = 0; i < bootstrapSizes.length; i++) {
$("<div />", {
class: 'device-' + bootstrapSizes[i] + ' visible-' + bootstrapSizes[i] + '-block'
}).appendTo("body");
}মন্তব্য করার মতো পর্যাপ্ত খ্যাতি পয়েন্ট আমার কাছে নেই তবে যারা ম্যাকিয়েজ গুরবান এর রেসপন্সপুলটুলকিট ব্যবহার করার চেষ্টা করছেন যখন "অচেনা" হওয়ার সমস্যা রয়েছে তাদের জন্য আমিও ত্রুটিটি পেয়ে যাচ্ছিলাম যতক্ষণ না আমি লক্ষ্য করেছি যে ম্যাকিয়েজ আসলে নীচের দিক থেকে টুলকিটটিকে রেফারেন্স করেছে ferences পৃষ্ঠাটি তার কোডপেনে
আমি তা করার চেষ্টা করেছি এবং হঠাৎ এটি কাজ করে! সুতরাং, প্রতিক্রিয়াশীল টুলকিট ব্যবহার করুন তবে আপনার লিঙ্কগুলি পৃষ্ঠার নীচে রাখুন:
আমি জানি না কেন এটি পার্থক্য করে তবে তা করে।
এখানে আরেকটি উপায় বর্তমান ভিউপোর্ট সনাক্ত করতে হয় ছাড়া আপনার জাভাস্ক্রিপ্ট মধ্যে ভিউপোর্ট আকার সংখ্যা নির্বাণ।
সিএসএস এবং জাভাস্ক্রিপ্ট স্নিপেটগুলি এখানে দেখুন: https://gist.github.com/steveh80/288a9a8abd4c3de16d799
আপনার সিএসএস এবং জাভাস্ক্রিপ্ট ফাইলগুলিতে স্নিপেটগুলি যুক্ত করার পরে আপনি বর্তমান ভিউপোর্টটি এটির মতো সনাক্ত করতে পারেন:
viewport.is('xs') // returns booleanআপনি যদি কোনও ভিউপোর্টের পরিসীমা সনাক্ত করতে চান তবে এটি এটি ব্যবহার করুন
viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg.containerক্লাসের জন্য বুটস্ট্র্যাপের সিএসএস এর মতো দেখাচ্ছে:
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 768px) {
.container {
width: 750px;
}
}
@media (min-width: 992px) {
.container {
width: 970px;
}
}
@media (min-width: 1200px) {
.container {
width: 1170px;
}
}সুতরাং এর অর্থ আমরা jQuery('.container').css('width')নির্ভরযোগ্যতার ত্রুটিগুলি ছাড়াই ব্রেকপয়েন্টগুলি সনাক্ত করতে নিরাপদে নির্ভর করতে পারি jQuery(window).width()।
আমরা এর মতো একটি ফাংশন লিখতে পারি:
function detectBreakpoint() {
// Let's ensure we have at least 1 container in our pages.
if (jQuery('.container').length == 0) {
jQuery('body').append('<div class="container"></div>');
}
var cssWidth = jQuery('.container').css('width');
if (cssWidth === '1170px') return 'lg';
else if (cssWidth === '970px') return 'md';
else if (cssWidth === '750px') return 'sm';
return 'xs';
}এবং তারপরে এটি পরীক্ষা করুন
jQuery(document).ready(function() {
jQuery(window).resize(function() {
jQuery('p').html('current breakpoint is: ' + detectBreakpoint());
});
detectBreakpoint();
});var cssWidth = parseInt( jQuery('.container').css('width') ); দ্বিতীয়টিতে পার্সেন্ট , ব্যাপ্তি ব্যবহার করুন if ( cssWidth < 768) { return 'xs'; } else if (cssWidth >= 768 && cssWidth <= 992) { return 'sm'; } else if (cssWidth > 992 && cssWidth <= 1200) { return 'md'; } else { return 'lg'; }
মধ্যে ব্রেকপয়েন্টের অবস্থা মুদ্রণ করতে সিএসএস :beforeএবং contentসম্পত্তি ব্যবহার করুন<span id="breakpoint-js"> যাতে জাভাস্ক্রিপ্টটিকে কেবল আপনার ফাংশনের মধ্যে ব্যবহারের জন্য ভেরিয়েবল হিসাবে পরিণত করতে এই ডেটাটি পড়তে হবে।
(উদাহরণটি দেখতে স্নিপেট চালান)
দ্রষ্টব্য: আমি <span>আমার ব্রাউজারের উপরের কোণায় একটি লাল পতাকা হিসাবে ব্যবহার করতে সিএসএসের কয়েকটি লাইন যুক্ত করেছি। display:none;আপনার জিনিসগুলি সর্বজনীনভাবে ঠেলে দেওয়ার আগে কেবল এটিকে আবার স্যুইচ করতে ভুলবেন না ।
// initialize it with jquery when DOM is ready
$(document).on('ready', function() {
getBootstrapBreakpoint();
});
// get bootstrap grid breakpoints
var theBreakpoint = 'xs'; // bootstrap336 default = mobile first
function getBootstrapBreakpoint(){
theBreakpoint = window.getComputedStyle(document.querySelector('#breakpoint-js'),':before').getPropertyValue('content').replace(/['"]+/g, '');
console.log('bootstrap grid breakpoint = ' + theBreakpoint);
}#breakpoint-js {
/* display: none; //comment this while developping. Switch back to display:NONE before commit */
/* optional red flag layout */
position: fixed;
z-index: 999;
top: 0;
left: 0;
color: white;
padding: 5px 10px;
background-color: red;
opacity: .7;
/* end of optional red flag layout */
}
#breakpoint-js:before {
content: 'xs'; /* default = mobile first */
}
@media screen and (min-width: 768px) {
#breakpoint-js:before {
content: 'sm';
}
}
@media screen and (min-width: 992px) {
#breakpoint-js:before {
content: 'md';
}
}
@media screen and (min-width: 1200px) {
#breakpoint-js:before {
content: 'lg';
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="container">
<span id="breakpoint-js"></span>
<div class="page-header">
<h1>Bootstrap grid examples</h1>
<p class="lead">Basic grid layouts to get you familiar with building within the Bootstrap grid system.</p>
</div>
</div>আমি টুইটার বুটস্ট্র্যাপ স্ক্রিনের আকার সনাক্তকরণের জন্য একটি নেটিভ জিকুয়ের পদ্ধতি তৈরি করেছি। এখানে:
// Screen size ID will be stored in this variable (global var for JS)
var CurrentBootstrapScreenSize = 'unknown';
$(document).ready(function () {
// <div> objects for all screen sizes required for screen size detection.
// These <div> is hidden for users eyes.
var currentScreenSizeDetectorObjects = $('<div>').css({
'position':'absolute',
'top':'-200px'
}).addClass('current-screen-size').append([
$('<div>').addClass('device-xs visible-xs').html(' '),
$('<div>').addClass('device-sm visible-sm').html(' '),
$('<div>').addClass('device-md visible-md').html(' '),
$('<div>').addClass('device-lg visible-lg').html(' ')
]);
// Attach <div> objects to <body>
$('body').prepend(currentScreenSizeDetectorObjects);
// Core method for detector
function currentScreenSizeDetectorMethod() {
$(currentScreenSizeDetectorObjects).find('div').each(function() {
var className = $(this).attr('class');
if($(this).is(':visible')) {
if(String(className).match(/device-xs/)) CurrentBootstrapScreenSize = 'xs';
else if(String(className).match(/device-sm/)) CurrentBootstrapScreenSize = 'sm';
else if(String(className).match(/device-md/)) CurrentBootstrapScreenSize = 'md';
else if(String(className).match(/device-lg/)) CurrentBootstrapScreenSize = 'lg';
else CurrentBootstrapScreenSize = 'unknown';
};
})
console.log('Current Bootstrap screen size is: '+CurrentBootstrapScreenSize);
$('.CurrentBootstrapScreenSize').first().html('Bootstrap current screen size: <b>' + CurrentBootstrapScreenSize + '</b>' );
}
// Bind screen size and orientation change
$(window).bind("resize orientationchange", function() {
// Execute screen detection
currentScreenSizeDetectorMethod();
});
// Execute screen detection on page initialize
currentScreenSizeDetectorMethod();
});জেএসফিল্ড: https://jsfiddle.net/pstepniewski/7dz6ubus/
ফুলস্ক্রিন উদাহরণ হিসাবে জেএসফিল্ড: https://jsfiddle.net/pstepniewski/7dz6ubus/ এম্বেডড / রিসাল্ট/
এতে আগ্রহী প্রত্যেকের জন্য, আমি টাইপস্ক্রিপ্ট এবং পর্যবেক্ষণগুলি ব্যবহার করে সিএসএস ব্রেকপয়েন্টগুলিতে ভিত্তি করে একটি ব্রেকপয়েন্ট সনাক্তকরণ লিখেছিলাম। আপনি যদি প্রকারগুলি সরিয়ে থাকেন তবে এটি থেকে ES6 তৈরি করা খুব কঠিন নয়। আমার উদাহরণে আমি সাস ব্যবহার করি তবে এটি মুছে ফেলাও সহজ।
এটি আমার জেএসফিডাল: https://jsfiddle.net/StefanJelner/dorj184g/
এইচটিএমএল:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>SCSS:
body::before {
content: 'xs';
display: none;
@media screen and (min-width: 480px) {
content: 's';
}
@media screen and (min-width: 768px) {
content: 'm';
}
@media screen and (min-width: 1024px) {
content: 'l';
}
@media screen and (min-width: 1280px) {
content: 'xl';
}
}টাইপ করা বিষয়:
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';
class BreakpointChangeService {
private breakpointChange$: BehaviorSubject<string>;
constructor(): BehaviorSubject<string> {
// initialize BehaviorSubject with the current content of the ::before pseudo element
this.breakpointChange$ = new Rx.BehaviorSubject(this.getBreakpoint());
// observe the window resize event, throttle it and combine it with the BehaviorSubject
Rx.Observable
.fromEvent(window, 'resize')
.throttleTime(0, Rx.Scheduler.animationFrame)
.withLatestFrom(this.breakpointChange$)
.subscribe(this.update.bind(this))
;
return this.breakpointChange$;
}
// method to get the content of the ::before pseudo element
private getBreakpoint(): string {
// see https://www.lullabot.com/articles/importing-css-breakpoints-into-javascript
return window.getComputedStyle(document.body, ':before').getPropertyValue('content').replace(/[\"\']/g, '');
}
private update(_, recent): void {
var current = this.getBreakpoint();
if(recent !== current) { this.breakpointChange$.next(current); }
}
}
// if the breakpoint changes, react on it
var $result = document.getElementById('result');
new BreakpointChangeService().subscribe(breakpoint => {
$result.innerHTML = Date.now()+': '+breakpoint;
});আমি এই কারো সাহায্য করে আশা করি।
JQuery, সরলিকৃত সমাধান সহ বুটস্ট্র্যাপ 4
<div class="device-sm d-sm-none"></div>
<div class="device-md d-md-none"></div>
<div class="device-lg d-lg-none"></div>
<div class="device-xl d-xl-none"></div>
<script>
var size = $('.device-xl').is(':hidden') ? 'xl' : ($('.device-lg').is(':hidden') ? 'lg'
: ($('.device-md').is(':hidden') ? 'md': ($('.device-sm').is(':hidden') ? 'sm' : 'xs')));
alert(size);
</script>আমি প্রদত্ত উত্তরের সাথে সত্যই সন্তুষ্ট হইনি, যা আমার কাছে ব্যবহার করা অত্যধিক জটিল বলে মনে হয়, তাই আমি নিজের সমাধানটি লিখেছি। তবে আপাতত এটি কাজের জন্য আন্ডারস্কোর / লড্যাশের উপর নির্ভর করে।
https://github.com/LeShrimp/GridSizeEvents
আপনি এটি এর মতো ব্যবহার করতে পারেন:
GridSizeEvents.addListener(function (newSize, oldSize) {
// Will output eg. "xs -> sm"
console.log(oldSize + ' -> ' + newSize);
});এটি বুটস্ট্র্যাপ 3 এর জন্য বক্সের বাইরে কাজ করে, কারণ ব্রেকপয়েন্টগুলি 768px, 992px এবং 1200px এ শক্ত কোডড থাকে। অন্যান্য সংস্করণগুলির জন্য আপনি কোডটি সহজেই মানিয়ে নিতে পারেন।
অভ্যন্তরীণভাবে এটি ম্যাচমিডিয়া () ব্যবহার করে এবং বুটস্ট্র্যাপের সাথে সুসংগত থাকা ফলাফলগুলি উত্পাদন করার গ্যারান্টি দেওয়া উচিত।
হতে পারে এটি আপনার কয়েকজনকে সহায়তা করবে, তবে একটি প্লাগইন রয়েছে যা আপনাকে বর্তমান বুটস্ট্র্যাপ ভি 4 ব্রেকপয়েন্টে দেখতে সহায়তা করে: https://www.npmjs.com/package/bs-breakpPoint
ব্যবহারের জন্য সহজ (jQuery এর সাথে বা ছাড়াই ব্যবহার করা যেতে পারে):
$(document).ready(function() {
bsBreakpoints.init()
console.warn(bsBreakpoint.getCurrentBreakpoint())
$(window).on('new.bs.breakpoint', function (event) {
console.warn(event.breakpoint)
})
})এখানে আমার সমাধান (বুটস্ট্র্যাপ 4):
<div class="alert alert-warning row">
<div class="col">
Bootstrap breakpoint is
</div>
<div class="col">
<div class="d-block d-sm-none">
XS
</div>
<div class="d-none d-sm-block d-md-none">
SM
</div>
<div class="d-none d-md-block d-lg-none">
MD
</div>
<div class="d-none d-lg-block d-xl-none">
MD
</div>
<div class="d-none d-xl-block">
MD
</div>
</div>
</div>নকআউট.জেএস ব্যবহার করা যে কোনও ব্যক্তির জন্য , আমি কিছু নকআউট.জেএস দেখতে পেয়েছিলাম এমন পর্যবেক্ষণযোগ্য বৈশিষ্ট্য যা ব্রেকপয়েন্টগুলিতে আঘাত হানার পরে আমাকে জানায়। আমি সিএসএস-স্টাইলের মিডিয়া প্রশ্নের জন্য মডার্নিজারের সমর্থনটি ব্যবহার করতে পছন্দ করেছি যাতে সংখ্যাগুলি বুটস্ট্র্যাপ সংজ্ঞাগুলির সাথে মিলে যায় এবং আধুনিকীকরণের সামঞ্জস্যতার সুবিধা পেতে পারে। আমার নকআউট ভিউ মডেলটি নিম্নরূপ:
var viewModel = function() {
// depends on jquery, Modernizr
var self = this;
self.widthXsOrLess = ko.observable();
self.widthSmOrLess = ko.observable();
self.widthMdOrLess = ko.observable();
var setWindowSizeVars = function() {
self.widthXsOrLess(!Modernizr.mq('(min-width: 768px)'));
self.widthSmOrLess(!Modernizr.mq('(min-width: 992px)'));
self.widthMdOrLess(!Modernizr.mq('(min-width: 1200px)'));
};
$(window).resize(setWindowSizeVars);
setWindowSizeVars();
};এটি সনাক্ত করার জন্য এখানে ভাল উপায় (সম্ভবত মজার, তবে কার্যকর) এবং আপনি প্রয়োজনীয় উপাদানটি ব্যবহার করতে পারেন তাই কোড পরিষ্কার:
উদাহরণ: সিএসএস:
@media (max-width: 768px) {
#someElement
{
background: pink
}
}এবং jQuery দ্বারা নথিতে:
if($('#someElement').css('background') == 'pink')
{
doWhatYouNeed();
}অবশ্যই CSS সম্পত্তি যে কোনও।
যেহেতু বুটস্ট্র্যাপ 4 শীঘ্রই বেরিয়ে আসবে আমি ভেবেছিলাম যে আমি এটি সমর্থন করে এমন কোনও ফাংশন ভাগ করব (এক্সএল এখন একটি জিনিস) এবং কাজটি করার জন্য ন্যূনতম jQuery সম্পাদন করে।
/**
* Get the Bootstrap device size
* @returns {string|boolean} xs|sm|md|lg|xl on success, otherwise false if Bootstrap is not working or installed
*/
function findBootstrapEnvironment() {
var environments = ['xs', 'sm', 'md', 'lg', 'xl'];
var $el = $('<span />');
$el.appendTo($('body'));
for (var i = environments.length - 1; i >= 0; i--) {
var env = environments[i];
$el.addClass('hidden-'+env);
if ($el.is(':hidden')) {
$el.remove();
return env;
}
}
$el.remove();
return false;
}বুটস্ট্র্যাপ 4
setResponsiveDivs();
function setResponsiveDivs() {
var data = [
{id: 'visible-xs', class: 'd-block d-sm-none'},
{id: 'visible-sm', class: 'd-none d-sm-block d-md-none'},
{id: 'visible-md', class: 'd-none d-md-block d-lg-none'},
{id: 'visible-lg', class: 'd-none d-lg-block d-xl-none'},
{id: 'visible-xl', class: 'd-none d-xl-block'}
];
for (var i = 0; i < data.length; i++) {
var el = document.createElement("div");
el.setAttribute('id', data[i].id);
el.setAttribute('class', data[i].class);
document.getElementsByTagName('body')[0].appendChild(el);
}
}
function isVisible(type) {
return window.getComputedStyle(document.getElementById('visible-' + type), null).getPropertyValue('display') === 'block';
}
// then, at some point
window.onresize = function() {
console.log(isVisible('xs') === true ? 'xs' : '');
console.log(isVisible('sm') === true ? 'sm' : '');
console.log(isVisible('md') === true ? 'md' : '');
console.log(isVisible('lg') === true ? 'lg' : '');
console.log(isVisible('xl') === true ? 'xl' : '');
};বা minified
function setResponsiveDivs(){for(var e=[{id:"visible-xs","class":"d-block d-sm-none"},{id:"visible-sm","class":"d-none d-sm-block d-md-none"},{id:"visible-md","class":"d-none d-md-block d-lg-none"},{id:"visible-lg","class":"d-none d-lg-block d-xl-none"},{id:"visible-xl","class":"d-none d-xl-block"}],s=0;s<e.length;s++){var l=document.createElement("div");l.setAttribute("id",e[s].id),l.setAttribute("class",e[s]["class"]),document.getElementsByTagName("body")[0].appendChild(l)}}function isVisible(e){return"block"===window.getComputedStyle(document.getElementById("visible-"+e),null).getPropertyValue("display")}setResponsiveDivs();আপনি যদি নকআউট ব্যবহার করেন তবে আপনার বর্তমান ভিউপোর্ট ব্রেকপয়েন্ট (এক্স, এসএম, এমডি বা এলজি) আপনার মডেলটিতে একটি পর্যবেক্ষণযোগ্যকে আবদ্ধ করতে নিম্নলিখিত কাস্টম বাইন্ডিংটি ব্যবহার করতে পারেন। বাঁধাই ...
divsসহ visible-??শ্রেণিটি মোড়ক করেdetect-viewport এবং এটি ইতিমধ্যে উপস্থিত না থাকলে এটি শরীরে যুক্ত করে (যাতে আপনি এই ডিভগুলি অনুলিপি না করেই এই বাঁধাইটি পুনরায় ব্যবহার করতে পারেন)ko.bindingHandlers['viewport'] = {
init: function(element, valueAccessor) {
if (!document.getElementById('detect-viewport')) {
let detectViewportWrapper = document.createElement('div');
detectViewportWrapper.id = 'detect-viewport';
["xs", "sm", "md", "lg"].forEach(function(breakpoint) {
let breakpointDiv = document.createElement('div');
breakpointDiv.className = 'visible-' + breakpoint;
detectViewportWrapper.appendChild(breakpointDiv);
});
document.body.appendChild(detectViewportWrapper);
}
let setCurrentBreakpoint = function() {
valueAccessor()($('#detect-viewport div:visible')[0].className.substring('visible-'.length));
}
$(window).resize(setCurrentBreakpoint);
setCurrentBreakpoint();
}
};
ko.applyBindings({
currentViewPort: ko.observable()
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div data-bind="viewport: currentViewPort"></div>
<div>
Current viewport breakpoint: <strong data-bind="text: currentViewPort"></strong>
</div>
<div>
(Click the <em>full page</em> link of this snippet to test the binding with different window sizes)
</div>ওপি থেকে কিছুটা সময় হয়ে গেছে তবে বুটস্ট্র্যাপ ৩ ব্যবহার করে এটির জন্য আমার সমাধান এখানে my আমার ব্যবহারের ক্ষেত্রে, আমি কেবল সারিগুলিকে লক্ষ্য করেছিলাম, তবে এটি একই ধারক ইত্যাদিতে প্রয়োগ করা যেতে পারে etc.
শুধু পরিবর্তন করুন .আপনি যা চান তাই করুন।
jQuery(document).ready(function ($) {
var alterClass = function () {
var ww = document.body.clientWidth;
if (ww < 768) {
$('.row').addClass('is-xs').removeClass('is-sm').removeClass('is-lg').removeClass('is-md');
} else if (ww >= 768 && ww < 992) {
$('.row').addClass('is-sm').removeClass('is-xs').removeClass('is-lg').removeClass('is-md');
} else if (ww >= 992 && ww < 1200) {
$('.row').addClass('is-md').removeClass('is-xs').removeClass('is-lg').removeClass('is-sm');
} else if (ww >= 1200) {
$('.row').addClass('is-lg').removeClass('is-md').removeClass('is-sm').removeClass('is-xs');
};
};
// Make Changes when the window is resized
$(window).resize(function () {
alterClass();
});
// Fire when the page first loads
alterClass();
});
<div class="d-none d-?-block"></div>। এই সিএসএস ক্লাসগুলি বুটস্ট্র্যাপ 4 এর জন্য ... বুটস্ট্র্যাপ 3 এ যা কিছু কাজে আসে তা ব্যবহার করুন window উইন্ডো রিসাইজ ইভেন্ট শোনার চেয়ে অনেক বেশি পারফরম্যান্ট।