jQuery获取浏览器大小并绑定事件

最新推荐文章于 2022-09-05 11:46:25 发布

转载最新推荐文章于 2022-09-05 11:46:25 发布 · 773 阅读

文章标签：

#jquery #浏览器 #magento #function

html javascript jquery 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了如何使用jQuery监听浏览器大小变化，实现页面元素宽度的动态调整，以适应不同屏幕尺寸。重点阐述了如何根据不同浏览器宽度设置特定的样式，提升用户体验。

本文转载自：锐想Magento » jQuery获取浏览器大小并绑定事件

在一个自适应宽度布局的项目中，用到了jQuery监听浏览器大小的事件。项目中的一个需求是，当浏览器宽度大于1200px时，将.page的宽度设置为1200，当浏览器宽度小雨1000px的时候，将.page的宽度设置为1000px。看上去非常简单的一个需求，实际作用却非常大。

首先，jQuery监听浏览器大小变化使用resize()方法，代码如下所示。通过在$(window)行绑定resize，jQuery会随时获取浏览器的高度和宽度，通过这些数值的不断变化，分别做相应的操作。

jQuery(window).bind("resize", changeLayout);
 
function changeLayout( e ) {
    var winHeight = jQuery(window).height();
    var winWidth = jQuery(window).width();
 
    if( winWidth > 1200) {
        jQuery('.page').css('width', '1200px');
        jQuery('.col1-layout .product-view .product-shop').css('width', '49%');
    } else {
        jQuery('.page').css('width', '1000px');
        jQuery('.col1-layout .product-view .product-shop').css('width', '39%');
    }
}

完成上述代码之后，如果运行起来，会发现一个问题，在刚打开页面未促发浏览器resize事件之前，.page是不存在任何样式的，那么，我们需要DOM读取完毕之后，就立刻获取当前浏览器的宽度，并为.page赋值。代码如下。

jQuery(document).ready(function(){
    var winWidth = jQuery(window).width();
    if( winWidth > 1200) {
        jQuery('.page').css('width', '1200px');
        jQuery('.col1-layout .product-view .product-shop').css('width', '49%');
    } else {
        jQuery('.page').css('width', '1000px');
        jQuery('.col1-layout .product-view .product-shop').css('width', '39%');
    }
})

实际上，这篇文章只是自适应布局的一个很小很小的技术应用，稍后会将Magento自适应布局的整体思路放出。