JavaScriptを使用してTwitter Bootstrap 3のレスポンシブブレークポイントを検出する方法
現在 、Twitterブートストラップ3には、768px、992px、および1200pxのレスポンシブブレークポイントがあります。これらは、それぞれ小型、中型、大型のデバイスを表します。
JavaScriptを使用してこれらのブレークポイントを検出するにはどうすればよいですか？
画面が変更されたときにトリガーされるすべての関連イベントをJavaScriptで聞きたいです。また、画面が小型デバイス、中型デバイス、大型デバイスのいずれであるかを検出できるようにします。
すでに何かがありますか？あなたの提案は何ですか？
編集：このライブラリはBowerとNPMから利用可能になりました。詳細については、githubリポジトリを参照してください。
更新された回答：
- ライブの例： CodePen
- 最新バージョン： Githubリポジトリ
- ブートストラップが好きではありませんか？チェック： Foundation demo および Custom framework demos
- 問題があります？ 問題を開く
免責事項：私は著者です。
最新バージョン（Responsive Bootstrap Toolkit 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の時点では、以下で説明する4つの<div>要素は必要ありません。
元の回答：
そのために巨大なスクリプトやライブラリは必要ないと思います。それは非常に簡単なタスクです。
</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つのdivにより、現在アクティブなブレークポイントを確認できます。 JSを簡単に検出するには、次の機能を使用します。
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
}
編集：既にBootstrapプロジェクトに含まれているjQueryでこれを行うことができるのに、別のjsライブラリを使用する必要がある理由はわかりません。
ウィンドウサイズを使用して、ブレークポイントをハードコーディングできます。角度の使用：
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';
}
}
};
});
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
}
});
JavaScriptを使用してTwitter Bootstrap 4.1.xのレスポンシブブレークポイントを検出する
Bootstrap v.4.0.0（および最新バージョンBootstrap 4.1.x）更新された grid options を導入したため、検出に関する古い概念が直接適用されない場合があります（ 移行手順 を参照）：
- より細かな制御のために、
768pxの下に新しいsmグリッド層を追加しました。これで、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;
};
JavaScriptを使用してBootstrap v4-betaのレスポンシブブレークポイントを検出する
Bootstrap v4-alphaとBootstrap v4-betaでは異なるアプローチがありましたグリッドブレークポイントなので、同じことを実現する従来の方法を次に示します。
/**
* 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;
}
どのプロジェクトにも簡単に統合できるので便利だと思います。ネイティブの レスポンシブディスプレイクラス Bootstrap自体を使用します。
ここに私自身の簡単な解決策：
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が言及したような手動の実装には問題はないはずです。
以下に、ご覧いただけるライブラリをいくつか示します。
- Response.js -jQueryプラグイン-htmlデータ属性を使用し、js APIもあります。
- enquire.js -enquire.jsは、CSSメディアクエリに応答するための軽量で純粋なJavaScriptライブラリです
- SimpleStateManager -レスポンシブWebサイト用のJavaScript状態マネージャー。軽量になるように構築されており、依存関係はありません。
これらのライブラリは、ブートストラップ、ファンデーションなどとは独立して動作するように設計されていることに注意してください。独自のブレークポイントを設定してお楽しみください。
Maciej Gurbanの回答を基に作成します（これは素晴らしいことです。これが気に入ったら、彼の回答に投票してください）。クエリするサービスを構築している場合、以下の設定で現在アクティブなサービスを返すことができます。これは、他のブレークポイント検出ライブラリを完全に置き換える可能性があります（イベントを入れた場合のenquire.jsなど）。 IDを持つコンテナをDOM要素に追加して、DOMトラバーサルを高速化したことに注意してください。
HTML
<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 currentBreakpoint
JAVASCRIPT（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;
}
};
});
これをブートストラッププロジェクトに追加して、アクティブなブレークポイントを視覚的に確認できます。
<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 です
なぜjQueryを使用して、ブートストラップコンテナクラスの現在のCSS幅を検出しないのですか？
すなわち..
if( parseInt($('#container').css('width')) > 1200 ){
// do something for desktop screens
}
また、$（window）.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>
JavaScriptを使用してすべてのページに動的に挿入するだけです（.visible-*-blockを使用してBootstrap 3で動作するように更新していることに注意してください。
// 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");
}
$（document）.width（）を使用する代わりに、この情報を提供するCSSルールを設定する必要があります。
私は正確にそれを得るために記事を書きました。こちらをご覧ください： http://www.xurei-design.be/2013/10/how-to-accurately-detect-responsive-breakpoints/
CSSの:beforeおよびcontentプロパティを使用して、<span id="breakpoint-js">にブレークポイントの状態を出力します。したがって、JavaScriptはこのデータを読み取って、関数内で使用する変数として変換するだけです。
（スニペットを実行して例を見る）
注：CSSの数行を追加して、ブラウザの上部にある<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>ここに、現在のビューポートを検出する別の方法がありますwithoutjavascriptにビューポートサイズ番号を入れます。
こちらのcssおよびjavascriptスニペットを参照してください： https://Gist.github.com/steveh80/288a9a8bd4c3de16d799
そのスニペットをcssおよびjavascriptファイルに追加すると、次のように現在のビューポートを検出できます。
viewport.is('xs') // returns boolean
ビューポート範囲を検出する場合は、次のように使用します
viewport.isEqualOrGreaterThan('sm') // returns true for sm, md and lg
私はコメントするのに十分な評判ポイントがありませんが、Maciej GurbanのResponsiveToolKitを使用しようとすると「認識されない」という問題がある場合、Maciejが実際にツールキットを参照することに気付くまでそのエラーが発生していました彼のCodePenのページ
私はそれをやってみましたが、突然うまくいきました！したがって、ResponsiveToolkitを使用しますが、ページの下部にリンクを配置します。
なぜ違いが出るのかわかりませんが、違います。
.containerクラスのBootstrapのCSSは次のようになります。
.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();
});
これに興味がある人のために、TypeScriptとObservablesを使用してCSSブレークポイントに基づいてブレークポイント検出を作成しました。タイプを削除しても、ES6を作成するのはそれほど難しくありません。私の例ではSassを使用していますが、これも簡単に削除できます。
これが私の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>
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';
}
}
TypeScript：
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;
});
これが誰かの助けになることを願っています。
Twitter Bootstrap画面サイズ検出用のネイティブ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/
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>
たぶんそれはあなたの何人かを助けるでしょう、しかしあなたがどの現在のブートストラップv4ブレークポイントを見ているかを検出するのを助けるプラグインがあります： https://www.npmjs.com/package/bs-breakpoints
使いやすい（jQueryの有無にかかわらず使用できます）：
$(document).ready(function() {
bsBreakpoints.init()
console.warn(bsBreakpoint.getCurrentBreakpoint())
$(window).on('new.bs.breakpoint', function (event) {
console.warn(event.breakpoint)
})
})
私は、与えられた答えに本当に満足していませんでしたが、それを使用するのは非常に複雑に思えたので、自分で解決策を書きました。ただし、当面の間は、これは機能するためにアンダースコア/ダッシュに依存しています。
https://github.com/LeShrimp/GridSizeEvents
次のように使用できます。
GridSizeEvents.addListener(function (newSize, oldSize) {
// Will output eg. "xs -> sm"
console.log(oldSize + ' -> ' + newSize);
});
ブレークポイントは768px、992px、および1200pxにハードコーディングされているため、これはBoxs for Bootstrap 3で機能します。他のバージョンでは、コードを簡単に調整できます。
内部的には、これは matchMedia（） を使用するため、Bootstrapと同期した結果を生成することを保証する必要があります。
knockout.jsを使用している人のために、いくつかの knockout.js観察可能なプロパティが必要でした ブレークポイントに到達すると通知されます。 CSSスタイルのメディアクエリに対する Modernizrのサポート を使用して、数値がブートストラップ定義に一致するようにし、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();
}
もちろん、cssプロパティはanyです。
ブートストラップ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' : '');
};または縮小
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();Knockoutを使用する場合、次のカスタムバインディングを使用して、現在のビューポートブレークポイント（xs、sm、mdまたはlg）をモデルのオブザーバブルにバインドできます。バインディング...
- id
visible-??のdivでdetect-viewportクラスの4つのdivsをラップし、まだ存在しない場合は本体に追加します（したがって、これらのdivを複製せずにこのバインディングを再利用できます） - どのdivが表示されているかを照会することにより、現在のビューポートブレークポイントをバインドされたオブザーバブルに設定します
- ウィンドウのサイズが変更されたときに現在のビューポートのブレークポイントを更新します
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>ブートストラップ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;
}
OPからしばらく経ちましたが、ここにBootstrap 3を使用したこのソリューションがあります。私のユースケースでは、行のみをターゲットにしていましたが、コンテナなどにも適用できます。
.rowを必要なものに変更するだけです。
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();
});