根据屏幕尺寸执行function
我需要根据屏幕尺寸和屏幕尺寸变化执行特定function（响应）
所以我说我有3个function（例如）
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或更低时，我需要执行functiongreen（）
并且当屏幕宽度大小为501px至850px时function为橙色（）
并且当屏幕宽度大小为851px或更高时function为红色（）
我尝试使用resize（），但问题是在为每个像素重复执行相同function时调整浏览器大小时执行该function，这是一种非常糟糕的执行方式
我需要在突破屏幕宽度大小时执行该function
准备在jsfiddle上使用代码http://jsfiddle.net/BaNRq/
咩; 这是一个解决方案。
您可以缓存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 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/
使用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(); });
并且在resize时只调用该函数并自动调用page.ready state上的函数。
// 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 🙂
希望这可以帮助..
如果你在谈论显示器的分辨率设置，请考虑window.screen ，例如我使用的是1280 x 1024因此我的报告
window.screen.height; // 1024 window.screen.width; // 1280
您还可以使用avail前缀来忽略任务栏之类的内容。 如果您只想计算浏览器的可见区域，那么您将在documentElement上使用clientHeight和clientWidth ，即
document.documentElement.clientWidth; // 1263 (the scrollbar eats up some) document.documentElement.clientHeight; // 581 (lots lost here, eg 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
我其实想把它作为对@Nirvana Tikku的答案的评论，但是我不能因为我没有50个声誉，所以我会在这里发表评论+我会添加一个我自己的解决方案，所以答案空间不会’浪费了。
评论：
我很抱歉（或许）“破坏党”，但要么我没有得到OP的问题，要么我可能误解了解决方案。 这就是我认为OP想要的：一种基于屏幕尺寸动态执行function而不执行每个像素重复function的方法 。 在给定的解决方案中，尽管一开始看起来很困难，但是函数会针对每个像素执行 。 尝试将console.log（’aaaa’）放在返回函数行之间，如下所示：
return function(){ console.log('aaaa') var width = window.innerWidth; // get the window's inner width
运行该function，然后点击F12按钮（在Firefox中）并调整窗口大小，您将看到它会调整整个resize时间（抱歉无法上传图像 – 不足够的代表’）。
我花了一整天的时间试图自己复制这个解决方案，这样我就能够根据屏幕尺寸执行一个function，但是没有“监听”沿途的每个像素。
到目前为止，似乎不可能（除非有人读到这个有解决方案），同时这是我的代码，恕我直言的方式不那么复杂。
解：
var widths = [0, 500, 850]; function resizeFn() { if (window.innerWidth>=widths[0] && window.innerWidth=widths[1] && window.innerWidth
看它工作在https://jsfiddle.net/BaNRq/16/
顺便说一句，这个答案实际上和@ Vainglory07相同，减去了jQuery