jquery中window的宽度（是window的宽度($(window).width())和屏幕分辩率的宽度（screen.width）的区别？

Posted 2023-05-07

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery中window的宽度（是window的宽度($(window).width())和屏幕分辩率的宽度（screen.width）的区别？相关的知识，希望对你有一定的参考价值。

$(window).width()和screen.width的区别是什么？在手机上各指的是什么？

$(window).width()指的是浏览器的高度，改变浏览器的高度，$(window).width()的值就会改变。

window.screen.width指的是你手机或电脑屏幕的高度，无论你怎么改变浏览器高度他都是不变的，和你的屏幕分辨率相关。

两者的高度是不一样的，使用js中的alert()方法打印这两个高度就会发现它们之间的差别。

扩展资料：

jQuery

jQuery 是继prototype 之后又一个优秀的轻量级javascript 框架。其宗旨是———“Write Less, Do More”,写更少的代码,做更多的事情。它是一个快速和简洁的JavaScript 库，可以简化html 文档元素的遍历，事件处理，动画和Ajax 交互以实现快速Web 开发，它被设计用来改变编写JavaScript 脚本的方式。

jQuery 最有特色的语法特点就是与CSS 语法相似的选择器，并且它支持CSS1 到CSS3 的几乎所有选择器，并兼容所有主流浏览器，这为快速访问DOM 提供了方便。

参考资料来源：百度百科-jQuery

参考技术A

1、新建一个html文件，命名为test.html。

2、在test.html文件中，在p标签内，使用img标签创建一张图片。

3、在test.html文件中，设置img元素的class属性为mypic，主要用于下面通过该class获得img对象。

4、在test.html文件内，使用button标签创建一个按钮，按钮名称为“获得宽度和高度”。

5、在test.html文件中，给button按钮绑定onclick点击事件，当按钮被点击时，执行get（）函数。

6、在浏览器打开test.html文件，点击按钮，查看实现的效果。

参考技术B window.screen.width 是指屏幕分辨率的宽度；

$(window).width() 是指浏览器可视窗口的宽度；

你可以alert()一下他们的值就可以看出区别；
在手机上亦然…本回答被提问者和网友采纳参考技术C $(window).width()是窗口的宽度，screen.width是显示器的宽度参考技术D window宽度是当前浏览器可视区域宽度，这个宽度是小于等于分辨率的，手机上的不太了解

jquery $(window).height() 和 $(document).height() 返回相同

【中文标题】jquery $(window).height() 和 $(document).height() 返回相同【英文标题】：jquery $(window).height() and $(document).height() return the same 【发布时间】：2013-04-22 17:22:33 【问题描述】：

我需要我的背景图片位于我的菜单 div 下方。因此，我没有将背景应用于 body 元素，而是放入另一个包含我的 body div 的 bg div 并将宽度设置为 100%。（我的 body div 具有指定的宽度）我在 bg div 内设置了背景。

我测试了一下，得到了一半的背景图片，因为文档不够长。所以我正在尝试对此进行 javascript 修复。

<!DOCTYPE HTML>
.....
<script type="text/javascript" src="jquery-min.js"></script>
<script type="text/javascript">
function setDocumentSize() 
    alert($(window).height());
    alert($(document).height());
    if ($(window).height()>$(document).height()) 
        var height = $(window).height()-$(document).height();
        document.getElementById('bg').style.height=height+"px"
        
    
.....
</script>
.....
<body onload="setDocumentSize()">
<div class="menu">
.....
</div>
<div class="bg">
    <div class="body">
    .....(background in this div) 
    </div>
</div>

现在两个警报都会弹出视口高度。因此什么也没有发生。

我使用的是 Firefox 16.0.2

这里是实际页面的链接http://servapps.dyndns-work.com/abstract/

【问题讨论】：

当您的文档不在窗口之外（无滚动条）时，它们显示相同。当您将窗口最小化到滚动条弹出并刷新页面时，您可能会得到线索.. :-) 为什么不只为背景 div 使用图像高度的最小高度？ 【参考方案1】：

这可能失败的另一个原因是缺少 doctype 声明 (<!DOCTYPE html>)。添加此修复$(window).height() 以返回正确的视口高度。

【讨论】：

谢谢！我真的为此发疯了！我想知道为什么会这样？有人知道吗？【参考方案2】：

这可以在 CSS 中完成。您需要确保所有包含的元素至少是页面的高度 (height: 100%)。这包括html 和body 元素。

此代码应该适用于您的网站：