10

画面サイズと画面サイズの変更に基づいて特定の機能を実行する必要がある(レスポンシブ)

だから私は3つの機能を持っているとしましょう（例）

function red() {
    $('div').css('background','#B60C0C')
    .text('Screen Size RED');
    console.log('RED');
}

function orange() {
    $('div').css('background','#EBAE10')
    .text('Screen Size ORANGE');
    console.log('ORANGE');
}

function green() {
    $('div').css('background','#83ba2b')
    .text('Screen Size GREEN');
    console.log('GREEN');
}

画面幅サイズが 500px 以下の場合、関数 green() を実行する必要があります

画面幅サイズが 501px から 850px のときの関数 orange()

画面幅サイズが851px以上の場合は関数 red()

ここに画像の説明を入力

私は resize() を使用しようとしましたが、同じ関数を実行するピクセルごとにブラウザのサイズを変更するときに関数を実行するという問題があり、これは非常に悪い実行方法です

画面幅サイズのポイントをブレークするときに関数を実行する必要があります

jsfiddle http://jsfiddle.net/BaNRq/ですぐに使用できるコード

4

4 に答える 4

8

まあ; ここに解決策があります。

変更が発生した場合にのみ関数を呼び出すように決定された lastBoundry をキャッシュできます。

// define the boundries
var bounds = [
    {min:0,max:500,func:red},
    {min:501,max:850,func:orange},
    {min:851,func:green}
];

// define a resize function. use a closure for the lastBoundry determined.
var resizeFn = function(){
    var lastBoundry; // cache the last boundry used
    return function(){
        var width = window.innerWidth; // get the window's inner width
        var boundry, min, max;
        for(var i=0; i<bounds.length; i++){
            boundry = bounds[i];
            min = boundry.min || Number.MIN_VALUE;
            max = boundry.max || Number.MAX_VALUE;
            if(width > min && width < max 
               && lastBoundry !== boundry){
                lastBoundry = boundry;
                return boundry.func.call(boundry);            
            }
        }
    }
};
$(window).resize(resizeFn()); // bind the resize event handler
$(document).ready(function(){
    $(window).trigger('resize'); // on load, init the lastBoundry
});

フィドル: http://jsfiddle.net/BaNRq/3/

于 2013-10-15T01:10:25.650 に答える
6

私は実際にこれを@Nirvana Tikkuの回答にコメントとして入れたかったのですが、50の評判がないのでできません。ここでコメントします+独自のソリューションを追加して、回答スペースが「無駄になりません。

コメント：

（おそらく）「パーティーを台無しにして」申し訳ありませんが、OPの質問が正しくなかったか、解決策を誤解している可能性があります。OPが望んでいたと思うのは、次のとおりです。画面サイズに基づいて関数を動的に実行し、各ピクセルに対して関数を実行せずに繰り返す方法。指定されたソリューションでは、最初は非常にわかりにくいですが、関数は各ピクセルに対して実行されます。次のように、return 関数行の間にconsole.log('aaaa')を挿入してみてください。

    return function(){
 console.log('aaaa')
        var width = window.innerWidth; // get the window's inner width

関数を実行し、F12 ボタン (Firefox の場合) を押してウィンドウのサイズを変更すると、サイズ変更に時間がかかることがわかります (申し訳ありませんが、画像をアップロードすることもできません - 十分な担当者がいません)。

このソリューションを自分で複製しようとして丸一日を費やしたので、画面サイズに基づいて関数を実行できますが、途中ですべてのピクセルを「リッスン」する必要はありません。

これまでのところ、(これを読んだ人が解決策を持っていない限り) 不可能に思えますが、一方で、私のコードはそれほど複雑ではありません。

解決：

var widths = [0, 500, 850];

function resizeFn() {
if (window.innerWidth>=widths[0] && window.innerWidth<widths[1]) {
red();
} else if (window.innerWidth>=widths[1] && window.innerWidth<widths[2]) {
orange();
} else {
green();
}
}
window.onresize = resizeFn;
resizeFn();

https://jsfiddle.net/BaNRq/16/で動作することを確認してください

ところで、これは答えです@ Vainglory07からjQueryを差し引いたものと実質的に同じです

于 2015-02-19T00:29:20.283 に答える
3

モニターの解像度設定について話している場合はwindow.screen、たとえば、私は1280 x 1024レポートを使用していることを考慮してください

window.screen.height; // 1024
window.screen.width;  // 1280

availプレフィックスを使用して、タスク バーなどを無視することもできます。ブラウザの可視領域だけを調べたい場合は、上でclientHeightandを使用します。つまり、clientWidthdocumentElement

document.documentElement.clientWidth;  // 1263 (the scrollbar eats up some)
document.documentElement.clientHeight; //  581 (lots lost here, e.g. to console)

火災が多すぎる問題については、レートリミッターを導入してください。

function rateLimit(fn, rate, notQueueable) {
    var caninvoke = true, queable = !notQueueable,
        ready, limiter,
        queue = false, args, ctx;
    notQueueable = null;
    ready = function () { // invokes queued function or permits new invocation
        var a, c;
        if (queable && queue) {
            a = args; c = ctx;
            args = ctx = null; queue = false; // allow function to queue itself
            fn.apply(c, a);
            setTimeout(ready, rate); // wait again
        } else
            caninvoke = true;
    }
    limiter = function () { // invokes function or queues function
        if (caninvoke) {
            caninvoke = false;
            fn.apply(this, arguments);
            setTimeout(ready, rate); // wait for ready again
        } else
            args = arguments, ctx = this, queue = true;
    };
    return limiter;
}

var myRateLimitedFunction = rateLimit(
    function () {console.log('foo');},
    2e3 // 2 seconds
);
myRateLimitedFunction(); // logged
myRateLimitedFunction(); // logged after rate limit reached
于 2013-10-14T23:56:44.273 に答える