根据窗口宽度更改JavaScript

我认为这很简单，但经过2天的尝试，我仍然无能为力。基本上，如果屏幕宽度超过767像素，则需要运行一组命令，而如果屏幕不超过767像素，则需要使用另一组命令。根据窗口宽度更改JavaScript

当屏幕比767个像素宽，我想：

<script type="text/javascript"> 

    var jsReady = false;//for flash/js communication 

    // FLASH EMBED PART 
    var flashvars = {}; 
    var params = {}; 

    params.quality = "high"; 
    params.scale = "noscale"; 
    params.salign = "tl"; 
    params.wmode = "transparent"; 
    params.bgcolor = "#111111";//change flash bg color here 
    params.devicefont = "false"; 
    params.allowfullscreen = "true"; 
    params.allowscriptaccess = "always"; 
    var attributes = {}; 
    attributes.id = "flashPreview"; 

    swfobject.embedSWF("preview.swf", "flashPreview", "100%", "100%", "9.0.0", "expressInstall.swf", flashvars, params, attributes); 

    <!-- and much more code... --> 

</script>

当屏幕比768个像素窄，我想运行：

<script type="text/javascript"> 

     jQuery(function($){ 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
     }); 

</script>

这是正确的？对于台式机和平板电脑，我想显示全屏视频背景。对于较小的屏幕（小于767像素），我想显示单个静止图像背景。

来源

2012-04-07 awDemo

您的意思是窗口（视口）宽度或物理屏幕（设备）的宽度？如果您的意思是视口，请使用Starx的答案。如果你的意思是设备，请使用庞查的答案。视口宽度在调整大小时发生变化。设备宽度不变（不需要调整大小处理程序）。请参阅http://responsejs.com/labs/dimensions/ – ryanve 2012-04-07 23:20:49

是的，我的意思是视口。我确实读了我的问题，但总是错过了一些东西！我会调查Starx的答案。谢谢！ – awDemo 2012-04-07 23:34:20

您可以使用$(window).width()获取窗口的正确大小，并在窗体的resize事件上附加处理程序。对于简单的使用，它就像

$(window).resize(funcion() { 
    $width = $(window).width(); 
    if($width < 767) { 
      $.supersized({ 
       //Background image 
       slides : [ { image : 'img/some_image.jpg' } ]     
      }); 
    } else { 
     //if width is greater than 767 
    } 
});

来源

2012-04-07 22:19:10 Starx

谢谢Starx！我是一个新手，所以在这里帮助一下...我可以在这里看到超大的代码，但我在哪里可以放置其他代码（当视口大于767时？ – awDemo 2012-04-07 23:35:31

@awDemo，您可以使用else block来检查，检查我的更新 – Starx 2012-04-08 02:58:32

非常感谢！ – awDemo 2012-04-08 08:46:30

if(screen.width > 767) { 
    code A... 
} else { 
    code B... 
}

来源

2012-04-07 22:03:26 poncha

这给出了设备宽度。如果这就是我们的意思，这很好。请参阅：http://responsejs.com/labs/dimensions/ – ryanve 2012-04-07 23:15:29

对。这是OP提到的（屏幕）。如果意图是处理视口宽度，那么必须以不同的方式完成，并考虑视口的更改（调整大小）。 – poncha 2012-04-07 23:35:24

我的意思是视口（对不起），但这也是很好的知道！谢谢。 – awDemo 2012-04-07 23:41:54

由于您使用JQuery，你可以这样做：

if ($(window).width > 767) { ... }

，返回窗口的当前大小，而不是最大。

来源

2012-04-07 22:06:04 McGarnagle

根据窗口宽度更改JavaScript

回答

相关问题