वर्तमान में , ट्विटर बूटस्ट्रैप 3 में निम्नलिखित उत्तरदायी ब्रेकप्वाइंट हैं: क्रमशः 768px, 992px और 1200px, छोटे, मध्यम और बड़े उपकरणों का प्रतिनिधित्व करते हैं।
मैं जावास्क्रिप्ट का उपयोग करके इन विराम बिंदुओं का पता कैसे लगा सकता हूं?
स्क्रीन बदलने पर ट्रिगर होने वाली सभी संबंधित घटनाओं के लिए मैं जावास्क्रिप्ट के साथ सुनना चाहूंगा। और यह पता लगाने में सक्षम होने के लिए कि क्या स्क्रीन छोटे, मध्यम या बड़े उपकरणों के लिए है।
वहाँ पहले से ही कुछ किया है? आपके सुझाव क्या हैं?
जवाबों:
संपादित करें: यह पुस्तकालय अब बोवर और एनपीएम के माध्यम से उपलब्ध है। विवरण के लिए गीथूब रेपो देखें।
अद्यतन उत्तर:
डिस्क्लेमर: मैं लेखक हूं।
यहां कुछ चीजें हैं जो आप नवीनतम संस्करण (उत्तरदायी बूटस्ट्रैप टूलकिट 2.5.0) का उपयोग कर सकते हैं:
// 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);
संस्करण 2.3.0 के अनुसार, आपको <div>नीचे बताए गए चार तत्वों की आवश्यकता नहीं है ।
मूल ANSWER:
मुझे नहीं लगता कि आपको इसके लिए किसी विशाल स्क्रिप्ट या लाइब्रेरी की आवश्यकता है। यह काफी सरल कार्य है।
पहले वाले निम्नलिखित तत्व डालें </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 divs आपको वर्तमान में सक्रिय ब्रेकपॉइंट के लिए जाँच करने की अनुमति देते हैं। एक आसान जेएस डिटेक्शन के लिए, निम्न फ़ंक्शन का उपयोग करें:
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 के साथ ऐसा कर सकते हैं तो आपको एक और js लाइब्रेरी का उपयोग क्यों करना चाहिए।
$(window).bind('resize')... लेकिन मोबाइल स्क्रीन अभिविन्यास से संबंधित अन्य घटनाएं हैं जो स्क्रीन आयाम को प्रभावित करती हैं।
.on('resize')
क्या आपने Response.js पर एक नज़र डाली है? यह इस तरह की चीज के लिए बनाया गया है। Response.band और Response.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 बीटा ग्रिड breakpoints पर अलग दृष्टिकोण था, इसलिए यहाँ एक ही प्राप्त करने की विरासत तरीका है:
/**
* 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.resize हर विंडो पर ट्रिगर करता है, जहां क्रॉसओवर को केवल तभी ट्रिगर किया जाएगा जब ब्रेकपॉइंट बदला जाता है
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>यहाँ BOOTPLY है
Maciej Gurban के उत्तर पर निर्माण (जो शानदार है ... यदि आपको यह पसंद है, तो कृपया अपना उत्तर दें)। यदि आप क्वेरी करने के लिए एक सेवा का निर्माण कर रहे हैं, तो आप नीचे सेटअप के साथ वर्तमान में सक्रिय सेवा वापस कर सकते हैं। यह अन्य ब्रेकपॉइंट डिटेक्शन लाइब्रेरी को पूरी तरह से बदल सकता है (जैसे अगर आप कुछ घटनाओं में डालते हैं तो enquire.js)। ध्यान दें कि मैंने DOM ट्रैवर्सल को गति देने के लिए DOM तत्वों को ID के साथ एक कंटेनर जोड़ा है।
एचटीएमएल
<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>COFFEESCRIPT (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 currentBreakpointJAVASCRIPT (AngularJS)
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;
}
};
});$ (दस्तावेज़) .width () का उपयोग करने के बजाय, आपको एक सीएसएस नियम निर्धारित करना चाहिए जो आपको यह जानकारी देता है।
मैंने इसे सटीक रूप से प्राप्त करने के लिए सिर्फ एक लेख लिखा है। इसे यहां देखें: http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
बूटस्ट्रैप कंटेनर क्लास की वर्तमान सीएसएस चौड़ाई का पता लगाने के लिए सिर्फ jQuery का उपयोग क्यों नहीं किया जाता है?
अर्थात..
if( parseInt($('#container').css('width')) > 1200 ){
// do something for desktop screens
}यदि आप किसी ब्राउज़र विंडो का आकार बदलते हैं, तो आप अपने लेआउट को "बिस्तर को भिगोने" से रोकने के लिए $ (विंडो) .resize () का उपयोग कर सकते हैं।
प्रत्येक पृष्ठ में कई बार नीचे डालने के बजाय ...
<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>बस जावास्क्रिप्ट का उपयोग इसे गतिशील रूप से प्रत्येक पृष्ठ में डालने के लिए करें (ध्यान दें कि मैंने इसे बूटस्ट्रैप 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");
}मेरे पास टिप्पणी करने के लिए पर्याप्त प्रतिष्ठा अंक नहीं हैं, लेकिन जिन लोगों को "अपरिचित" होने के साथ समस्या हो रही है, जब वे Maciej Gurban के ResponsiveToolKit का उपयोग करने का प्रयास करते हैं, मुझे भी वह त्रुटि मिल रही थी जब तक कि मैंने यह नहीं देखा कि Maciej वास्तव में टूलकिट के नीचे से संदर्भित करता है। पेज अपने कोडपेन में
मैंने ऐसा करने की कोशिश की और अचानक यह काम कर गया! तो, ResponsiveToolkit का उपयोग करें लेकिन अपने लिंक को पृष्ठ के निचले भाग में रखें:
मुझे नहीं पता कि इससे फर्क क्यों पड़ता है लेकिन यह होता है।
यहां आपकी जावास्क्रिप्ट में व्यूपोर्ट आकार संख्याओं को डाले बिना वर्तमान व्यूपोर्ट का पता लगाने का एक और तरीका है ।
सीएसएस और जावास्क्रिप्ट स्निपेट यहां देखें: https://gist.github.com/steveh80/288a9a8bd4c3de16d799
अपनी सीएसएस और जावास्क्रिप्ट फ़ाइलों में उस स्निपेट को जोड़ने के बाद आप इस तरह से वर्तमान व्यूपोर्ट का पता लगा सकते हैं:
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>अपने ब्राउज़र के ऊपरी कोने में लाल झंडे के रूप में उपयोग करने के लिए CSS की कुछ लाइन जोड़ी । बस 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>मैंने ट्विटर बूटस्ट्रैप स्क्रीन साइज डिटेक्शन के लिए एक देशी jQuery विधि बनाई है। यहाँ है:
// 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();
});JSFillde: https://jsfiddle.net/pstepniewski/7dz6ubus/
JSFillde को फुलस्क्रीन उदाहरण के रूप में: https://jsfiddle.net/pstepniewski/7dz6ubus/embedded/result/
इसमें दिलचस्पी रखने वाले किसी के लिए, मैंने टाइपस्क्रिप्ट और ऑब्ज़र्वबल्स का उपयोग करके सीएसएस ब्रेकप्वाइंट के आधार पर एक ब्रेकप्वाइंट का पता लगाया। यदि आप प्रकारों को हटाते हैं, तो ईएस 6 को बनाना बहुत कठिन नहीं है। मेरे उदाहरण में मैं सैस का उपयोग करता हूं, लेकिन इसे हटाना भी आसान है।
यहाँ मेरा JSFiddle: https://jsfiddle.net/StefanJelner/dorj184g/ है
HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.7/Rx.min.js"></script>
<div id="result"></div>एससीएसएस:
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 के लिए कठिन कोडित किया गया है। अन्य संस्करणों के लिए आप आसानी से कोड को अनुकूलित कर सकते हैं।
आंतरिक रूप से यह मैचमेडिया () का उपयोग करता है और इस प्रकार बूटस्ट्रैप के साथ सिंक करने वाले परिणामों का उत्पादन करने की गारंटी होनी चाहिए।
शायद यह आप में से कुछ की मदद करेगा, लेकिन एक प्लगइन है जो आपको यह पता लगाने में मदद करता है कि वर्तमान बूटस्ट्रैप किस पर है v4 ब्रेकपॉइंट को देख रहे हैं: https://www.npmjs.com/package/bs-breakpoint
उपयोग करने के लिए सरल (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>नॉकआउट.जेएस का उपयोग करने वाले किसी भी व्यक्ति के लिए , मुझे कुछ नॉकआउट चाहिए। वे अवलोकनीय गुण हैं जो मुझे बताएंगे कि ब्रेकपॉइंट्स हिट कब होंगे। मैंने css- शैली के मीडिया प्रश्नों के लिए Modernizr के समर्थन का उपयोग करने का विकल्प चुना ताकि संख्या बूटस्ट्रैप परिभाषाओं से मेल खाए, और आधुनिकीकरण की अनुकूलता लाभ प्राप्त कर सके। मेरा नॉकआउट व्यू मॉडल निम्नानुसार है:
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();
};यह पता लगाने का अच्छा तरीका है (शायद मज़ेदार, लेकिन काम करता है) और आप आवश्यक तत्व का उपयोग कर सकते हैं इसलिए कोड स्पष्ट है:
उदाहरण: css:
@media (max-width: 768px) {
#someElement
{
background: pink
}
}और दस्तावेज़ में jQuery द्वारा:
if($('#someElement').css('background') == 'pink')
{
doWhatYouNeed();
}बेशक सीएसएस संपत्ति किसी भी है
चूंकि बूटस्ट्रैप 4 जल्द ही बाहर हो जाएगा, मैंने सोचा कि मैं एक फ़ंक्शन साझा करूंगा जो इसे समर्थन करता है (xl अब एक बात है) और काम पूरा करने के लिए न्यूनतम 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;
}बूटस्ट्रैप ४
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' : '');
};या कीमा बनाया हुआ
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();यदि आप नॉकआउट का उपयोग करते हैं , तो आप अपने मॉडल के अवलोकन योग्य वर्तमान व्यूपोर्ट ब्रेकपॉइंट (xs, sm, md या lg) को बांधने के लिए निम्नलिखित कस्टम बाइंडिंग का उपयोग कर सकते हैं। बाइंडिंग...
divsसाथ 4 को लपेटता है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>ओपी के बाद से यह एक समय हो गया है, लेकिन यहां बूटस्ट्रैप 3 का उपयोग करने के लिए मेरा समाधान है। मेरे उपयोग के मामले में, मैं केवल पंक्तियों को लक्षित कर रहा था, लेकिन कंटेनर पर भी लागू किया जा सकता है, आदि।
बस जो चाहे बदल लो।
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>। उन CSS कक्षाएं बूटस्ट्रैप 4 के लिए हैं ... बूटस्ट्रैप में जो भी काम करता है उसका उपयोग करें 3. खिड़की के आकार की घटना को सुनने की तुलना में अधिक प्रदर्शन करने वाला।