Jquery识别屏幕分辨率的总结

2019-05-30

一、jq判断显示器屏幕分辨率

<script language="javascript">
        $(function () {
            if ((screen.width == 1024) && (screen.height == 768)) {
                $("#xx").height(500);//此分辨率下你需要的操作
            } else if ((screen.width == 1360) && (screen.height == 900)) {
                $("#xx").height(700);//这个分辨率下你的操作
            } else {
                $("#xx").height(500);//默认操作
            }
        });
</script>


二、jq侦听屏幕分辨率resize

$(window).resize(function () {          //当浏览器大小变化时
    alert($(window).height());          //浏览器时下窗口可视区域高度
    alert($(document).height());        //浏览器时下窗口文档的高度
    alert($(document.body).height());   //浏览器时下窗口文档body的高度
    alert($(document.body).outerHeight(true)); //浏览器时下窗口文档body的总高度 包括border padding margin
});

三、jq获取屏幕分辨率大小

$(document).ready(function(){
alert($(window).height()); //浏览器当前窗口可视区域高度
alert($(document).height()); //浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin

alert($(window).width()); //浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin

})