JavaScript获取浏览器可视区域的宽高

在做项目的时候，我们常常需要对项目做一些优化，来提升页面响应的速度，比如进入可视区域后再发送请求获取数据或者是填充模板，这个时候就需要能够获取到浏览器的可视区域的宽高：

// 获取浏览器可视区域宽高（兼容性比较好，不包括工具栏和滚动条）
var browserWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
var browserHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;

对于ie浏览器的兼容性一直是令人头大的问题，ie永远是最特殊的那一个浏览器，所以你可以使用上面那种兼容性比较好的获取方法，也可以单独设置ie浏览器下获取可视区域宽高的属性：

对于 ie 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth
//或者
document.body.clientHeight
document.body.clientWidth

对于Internet Explorer9、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight; // 浏览器窗口的内部高度
window.innerWidth; // 浏览器窗口的内部宽度

JavaScript获取浏览器可视区域的宽高相关推荐

JS获取浏览器可视区域宽高
写在前面浏览器可视区域宽高并不就等于浏览器窗口宽高,而是除去顶部标签栏+滚动条(如果有)+控制台(如果有f12打开)之外的尺寸大小因为比较简单所以直接上代码: let w, h; // 对于ie9 ...
常见浏览器宽高及可视区域的宽高获取问题
网页可见区域宽: document.body.clientWidth; 网页可见区域高: document.body.clientHeight; //body 网页可见区域宽: document.bo ...
获取浏览器可视区域、屏幕的宽和高
document.documentElement.clientWidth:取得浏览器页面可视区域的宽度document.documentElement.clientHeight:取得浏览器页面可视区域 ...
JavaScript获取屏幕可视区域的高度
开发工具与关键技术:DW/浏览器 : JavaScript. 作者:刘佳明撰写时间:2019年 2 月 17 日本篇为大家简单阐述编程使如何让页面的窗口高度随着屏幕可视的高度变化而变化: 该方法不 ...
获取浏览器可视区域宽度和高度兼容主流浏览器
<script type="text/javascript" language="javascript"> function fnG ...
js获取浏览器可视区域高度并赋值给div/iframe
js代码部分 <script>function getFrame1Height() {var Frame = document.getElementById('frame');//获取fr ...
android如何获取分屏区域的宽高,Android N获取屏幕高度的问题
获取屏幕高度的代码 int getScreenHeight(Activity context) { WindowManager wm = (WindowManager)context.getSyste ...
获取屏幕可视区域的宽度和高度
window.outerWidth与window.outerHeight:获得的是加上工具条与滚动条窗口的宽度与高度. window.innerWidth与window.innerHeight:获得的 ...
javascript 快速获取图片实际大小的宽高
javascript 快速获取图片实际大小的宽高简陋的获取图片实际宽高的方式 // 图片地址 var img_url = '13643608813441.jpg'// 创建对象 var img = ...

JavaScript获取浏览器可视区域的宽高

JavaScript获取浏览器可视区域的宽高

JavaScript获取浏览器可视区域的宽高相关推荐

最新文章

热门文章