window 的宽高和screen的宽高对比

最新推荐文章于 2024-05-10 17:27:37 发布

原创最新推荐文章于 2024-05-10 17:27:37 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#window 的宽高和screen的宽高 #window.width #screen.width #window.height

JavaScript 相关知识专栏收录该内容

27 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>window 的宽高和screen的宽高对比</title>
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<script>

$(function(){
  alert(location.pathname )
  alert($(window).width());
  alert(screen.width)

  // 注意:window 的宽度指的是浏览器窗口的宽度，注意是窗口的宽度，单位是px（不包工具栏和滚动条）；
  // screen的宽度指的是屏幕的分辨率，单位是px；
  // 举个例子，浏览器执行下面的代码，比如你的电脑分辨率是1920*1080像素，然后你不停的拉动窗口改变宽度，那么每次执行，弹出的数字：
  // screen的宽度：固定是1920（电脑分辨率），不随窗体变化而变化；
  // window 的宽度：随着拉动窗体，数字一直在修改。


/*同理高度也是一样的*/
 alert($(window).height());/* 随窗体变化而变化*/
   alert(screen.height)  /*1080px*/
/*
注意，
情况一：窗口在全屏没有缩也没有滚动条（window 的宽度不包括滚动条宽度）的情况下。window 的宽度会等于screen的宽度。window 的高度一定不等于screen的高度，因为window 的高度不包括浏览器上面的任务栏高度。
情况二：f11下浏览器全屏并且没有滚动条，那么window的宽度和高度就等于screen的宽度和高度

*/

})

</script>

<div style="height:5000000000px">

</div>


</body>
</html>