Window 对象
Window 对象表示浏览器中打开的窗口。JavaScript 层级中的顶层对象，表示浏览器窗口。
如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
注释：没有应用于 window 对象的公开标准，不过所有浏览器都支持该对象。

使用jQuery可以这样获取window的宽高：
宽度： $(window).width()
高度： $(window).height()

实际效果：

 

//

相同的屏幕不同的浏览器，即使都最大化，宽度也可能不一样，可以在IE，Chrome，火狐的浏览器中打开本页看看上面的数值。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>获取浏览器window高宽-柯乐义</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>
<div id="windowinfo_keleyi_com"></div>
<script type="text/javascript">
$("#windowinfo_ke" + "leyi_com").html("宽度: " + $(window).width() + ", 高度: " + $(window).height());
</script>
<div style="background-color:Red; width:100%;height:150px;">欢迎</div>
<div style="background-color:Yellow; width:100%;height:150px;">hi</div>
<div style="background-color:Silver; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯乐义</div>
<div style="background-color:Olive; width:100%;height:150px;">柯乐义 返回顶部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整代码</div>
<div style="height:130px;"></div>

<div id="downmsg_emessage" style="DISPLAY: block">
<div id="downmsgBar">
<div id="donwmsg_head">柯乐义推荐内容</div><a class="close" href="javascript:closeDiv()"></a><a class="msg-hidden-btn-1" id="msg_hidden_btn" href="javascript:showHideDiv()">&nbsp;</a></div>
<div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
<ul>
<li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" >单行文字间歇向上滚动</a></li>
<li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" >jQuery UI修饰title气泡</a></li>
<li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" >jquery清空textarea等输入框</a></li>
<li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" >jquery关灯特效</a></li>
<li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" >可改变大小DIV层</a></li>
</ul>
<div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a> 　 <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a> 　 <a href="http://keleyi.com/menu/cms/" target="_blank">CMS</a> </div>
</div>
</div>
</body>
</html>

原文：http://keleyi.com/a/bjac/nk1dr8xn.htm

jQ获取浏览器window的高宽的更多相关文章

  1. Js与Jq 获取浏览器和对象值的方法

    JS and Jquery 都能获取页面元素的宽度,高度和相对位移等数值,那他们之间能相互转换或替代吗,写法又有哪些差异呢?本文将详细为你介绍. 1.Js获取浏览器高度和宽度document.docu ...

  2. JQ 获取浏览器窗口宽高

    $(window).height(); // 浏览器时下窗口可视区域高度 $(document).height(); //浏览器时下窗口文档的高度 $(document.body).height(); ...

  3. Jq_Js_Js、Jq获取浏览器和屏幕各种高度宽度

    $(document).ready(function()         {alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).he ...

  4. jq获取浏览器的高度

    // console.log("2-"+$(window).height()); //浏览器当前窗口可视区域高度 // console.log("3-"+$(d ...

  5. 获取父iframe的高宽

    var p_window = window.top;        //alert($(p_window).height());        var p_demo = window.top.docu ...

  6. jq获取浏览器可视窗口的高度

    <script> var window_height = $(window).height(); </script>

  7. JS 获取浏览器和屏幕宽高等信息代码

    JS 获取浏览器和屏幕宽高等信息. 网页可见区域宽:document.body.clientWidth  网页可见区域高:document.body.clientHeight  网页可见区域宽:doc ...

  8. LayIM聊天框全屏根据浏览器高宽自适应

    个人博客 地址:http://www.wenhaofan.com/article/20190410190628 问题 由于LayIM没有处理聊天框在全屏状态下根据浏览器缩放处理高宽,所以会导致在浏览器 ...

  9. JQ关于浏览器宽高的获取方式

    JQ关于浏览器宽高的获取方式 alert($(window).height()); //浏览器时下窗口可视区域高度alert($(document).height()); //浏览器时下窗口文档的高度 ...

随机推荐

  1. 了解HTML表单之13个表单控件

    目录 传统控件 button select option optgroup textarea fieldset legend label 新增控件 datalist keygen output pro ...

  2. Android切换动画之ViewPager

    有过开发经验的程序员都知道这个效果,就是当我们第一次安装一个软件时有一个使用说明的图片切换效果,他是如何实现的呢?今天我们就一起学习一下吧,难度系数1.0,就是只要你仔细分析,都可以学会.废话不多说, ...

  3. JSON.stringify转换Date不正确的解決方法

    JSON.stringify转换Date不正确的原因:国际时区(UTC)和中国时区(GMT)的原因,东八区+8等于国际时区. 解决方法,重新Es5的Date.prototype.toJSON方法,代码 ...

  4. LeetCode:Ransom Note_383

    LeetCode:Ransom Note [问题再现] Given
 an 
arbitrary
 ransom
 note
 string 
and 
another 
string 
contai ...

  5. RWD Table Patterns – 响应式表格解决方案

    在显示复杂的表格数据的时候,相信 Web 开发人员都碰到过显示不下的情况.RWD Table Patterns 是一个很好的响应式表格解决方案.它采用移动优先以及渐进增强的设计理念,在不支持响应式的浏 ...

  6. MAC与HMAC的介绍及其在AWS和Azure中的应用

    MAC 在密码学中,(消息认证码)Message Authentication Code是用来认证消息的比较短的信息.换言之,MAC用来保证消息的数据完整性和消息的数据源认证. MAC由消息本身和一个 ...

  7. JS&CSS文件请求合并及压缩处理研究（五）

    接上篇.在我们最终调用 @Html.RenderResFile(ResourceType.Script) 或者 @Html.RenderResFile(ResourceType.StyleSheet) ...

  8. StringExtensions

    public static string MakeSafeSql(this string s) { string t = s; t = t.Replace("'", "' ...

  9. 【Android】做一款类似我要当学霸里的学习监督的APP

    我要当学霸这款App有个学习监督的功能,当你启动它的时候,你将无法使用其他App,以此达到帮助人提高自觉性,起到监督学习的效果.最近和同学做了个小App,正好有这个功能,所以就来说说它是怎么实现的. ...

  10. 用Qt写软件系列五：一个安全防护软件的制作（3）

    引言 上一篇中讲述了工具箱的添加.通过一个水平布局管理器,我们将一系列的工具按钮组合到了一起,完成了工具箱的编写.本文在前面的基础上实现窗体分割效果.堆栈式窗口以及Tab选项卡. 窗体分割 窗体分割是 ...