`

js 计算浏览器宽度和高度

 
阅读更多

<!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=gb2312" />

<title>请调整浏览器窗口</title> 

</head> 

<body> 

<h2 align="center">请调整浏览器窗口大小</h2><hr /> 

<form action="#" method="get" name="form1" id="form1"> 

<!--显示浏览器窗口的实际尺寸--> 

浏览器窗口 的 实际高度: <input type="text" name="availHeight" size="4"/><br /> 

浏览器窗口 的 实际宽度: <input type="text" name="availWidth" size="4"/><br /> 

</form> 

<script type="text/javascript"> 

<!-- 

var winWidth = 0; 

var winHeight = 0; 

function findDimensions() //函数:获取尺寸 

//获取窗口宽度 

if (window.innerWidth) 

winWidth = window.innerWidth; 

else if ((document.body) && (document.body.clientWidth)) 

winWidth = document.body.clientWidth; 

//获取窗口高度 

if (window.innerHeight) 

winHeight = window.innerHeight; 

else if ((document.body) && (document.body.clientHeight)) 

winHeight = document.body.clientHeight; 

//通过深入Document内部对body进行检测,获取窗口大小 

if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) 

winHeight = document.documentElement.clientHeight; 

winWidth = document.documentElement.clientWidth; 

//结果输出至两个文本框 

document.form1.availHeight.value= winHeight; 

document.form1.availWidth.value= winWidth; 

findDimensions(); 

//调用函数,获取数值 

window.onresize=findDimensions; 

//--> 

</script> 

</body> 

</html> 

分享到:
评论

相关推荐

    JS动态设置表格高度、宽度

    JS动态设置表格高度、宽度所有浏览器全兼容

    javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等

    scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于...

    remaining-height:填充容器的剩余高度或宽度

    rem-height-auto - 一个容器的子级,采用标准高度(浏览器通常为它计算的任何高度) rem-height-percent - 容器的一个孩子,承担其他孩子没有采取的剩余高度的percent 这对宽度不起作用,我仍然使用表格。

    text-metrics:针对浏览器的有效文本度量集

    文本度量支持AMD(例如RequireJS),CommonJS(例如Node.js)和直接使用(例如,使用[removed]标签全局加载)加载方法。 您应该几乎可以执行任何操作,然后无论如何都跳到下一部分并使其起作用。 为了以防万一,下面...

    JavaScript 复制功能代码 兼容多浏览器(ZeroClipboard)

    它接受两个参数,分别为 Flash 的宽度和高度。返回的是 Flash 对应的 HTML 代码。例如: var html = clip.getHTML( 150, 20 ); 你可以用 innerHTML 或直接 [removed](); 进行输出。 以下是测试输出的组装完毕的HTML ...

    【JavaScript源代码】javascript实现简单滚动窗口.docx

     window.screen.height:屏幕像素的高度 window.screen.width:屏幕像素的宽度 window.screenLeft;左边距离屏幕的距离 window.screenTop;上面距离屏幕的距离 setTimeout:方法用于在指定的毫秒数后调用函数或...

    js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】

    //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px...

    html-canvas-img-resizer:用于具有HTML5画布的浏览器的图像大小调整器

    用于具有HTML5画布的浏览器的图像...注意:如果未提供div的高度,则画布的宽度和高度由所提供的div的id确定,高度将根据纵横比进行相应计算 去做 重组代码以提高可读性 添加对固定宽度裁切的支持 直接在html中使用 ...

    react-auto-height:动画的高度

    浏览器不支持从高度和宽度到auto值的转换,请参阅W3C问题进行讨论。 该组件实现了一个受JavaScript技术启发的变通方法。 仅当您拥有真正的动态内容而没有确定的高度值时,才使用。 性能方面的考虑因素很小(当评估...

    js使用小技巧

    Javascript小技巧一箩筐 事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture(); 事件按键 event.keyCode ...

    程序天下:JavaScript实例自学手册

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    EasyUI加载完Html内容样式渲染完成后显示

    //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离(loading框的宽度为215px,...

    《程序天下:JavaScript实例自学手册》光盘源码

    9.9 JavaScript遍历table的行和列 9.10 表格按回车自动生成新行 9.11 单击单元格背景变色 9.12 单击表格某行后其他行隐藏 9.13 单击表头实现表格排序 9.14 单击单元格显示行的详细信息 9.15 表格设置为“100%”时...

    工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究

    Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE中, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关...

    javascript函数的解释

    49.引用一个文件式的JS:&lt;script type="text/javascript" src="aaa.js"&gt; 50.指定在不支持脚本的浏览器显示的HTML:&lt;noscript&gt;&lt;/noscript&gt; 51.当超链和ONCLICK事件都有时,则老版本的浏览器转向a.html,否则转向b.html.例...

    jQuery.imgUtil:图像实用程序

    $.imgUtil.calcNaturalWH 计算 img 的自然宽度/高度。 较新的浏览器具有 naturalWidth/naturalHeight 功能。 有了这些,我们就可以得到 img 的原始宽度/高度。 但是这些功能有时很难处理,因为它在 img 未加载完成...

    quicksprite:在浏览器中创建 CSS Sprite 图像的工具

    它为每个图像生成宽度和高度,甚至背景图像属性。 CSS 类是根据每个图像文件名猜测的。 用户可以在驼峰式大小写和破折号分隔的类名之间进行选择。 使用 Quick Sprite 非常简单,您只需在应用程序中拖动您的图像,它...

    IBM WebSphere Portal门户开发笔记01

    5、JS 计算网页内容的宽与高 (浏览器的标准模式与怪异模式) 237 6、JS设置与查看网页的解析模式(值) 249 7、JS判断对象是否已经存在 249 8、CSS设置网页在IE下为灰色显示 250 9、HTML A链接CSS样式 251 10、CSS...

    使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo

    Jquery.Qrcode.js是一个在浏览器端基于Jquery动态生成二维码的插件,支持Canvas和Table两种渲染方式,它的优点是在客户端动态生成,减轻了服务端压力,尤其是在大量使用二维码的系统中。Jquery.Qrcode主要包括以下...

    twitch-confetti-overlay:让观看者通过聊天中的命令将五彩纸屑放在流中

    Twitch纸屑覆盖允许观众使用聊天命令...confetti 使用OBS(Streamlabs,Streamelements等)为覆盖创建浏览器源: 选中本地文件框浏览到confetti-overlay.html本地文件设置宽度和高度,我建议使用1280X720或1920X1080 将

Global site tag (gtag.js) - Google Analytics