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 想要的：一种根据屏幕大小动态执行函数并且不为每个像素重复执行函数的方法。在给定的解决方案中，虽然一开始也很难看到，但该函数确实为每个像素执行。尝试将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

使用javascript，您可以获得屏幕大小的值。从那里你可以调用你的自定义函数来得到你想要的。

 //function for screen resize
 function screen_resize() {
        var h = parseInt(window.innerHeight);
        var w = parseInt(window.innerWidth);

        if(w <= 500) {
            //max-width 500px
            // actions here...
            red();
        } else if(w > 500 && w <=850) {
            //max-width 850px
            // actions here...
            orange();
        } else {
            // 850px and beyond
            // actions here...
            green();
        }

    }

我使用 window.innerHeight/innerWidth 来获取屏幕的高度/宽度，而不考虑/忽略滚动条。

    // if window resize call responsive function
    $(window).resize(function(e) {
        screen_resize();
    });

并且在调整大小时只需调用该函数并在 page.ready 状态下自动调用该函数。

    // auto fire the responsive function so that when the user
    // visits your website in a mall resolution it will adjust
    // to specific/suitable function you want
    $(document).ready(function(e) {
        screen_resize();
    });

尝试在此处检查输出：OUTPUT :)

希望这可以帮助..

于 2013-10-15T00:04:25.000 回答
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 回答