JS获取视口

js提供了大量的属性来描述窗口尺寸，但是在不同的浏览器中，存在着一些细节差异，本文用来记录这些容易忘记的小细节

目前只测试了chrome,firefox,ie8,9,10,11(使用ie11的仿真模式)

标准模式 PC端 屏幕尺寸1920*1080 全屏浏览器测试 格式 宽 / 高

浏览器/属性 inner documentElement.client body.client
i8 undefined / undefined 1899 / 961 3000 /3500
i9+ 1920 / 982 1903 /965 3000 /3500
chrome 1920 / 974 1903 / 957 3000 / 3500
firefox 1920 / 974 1903 / 957 3000 / 3500

从图上可以看出，innerWidth是很适用的，除了ie8及其以下版本不支持外，所有的浏览器都能返回正确的视口值

innerHeight在ie9+以上的浏览器中比其他浏览器多了8px，这是因为IE9+的浏览器头部高度为58px，而其他两款浏览器的头部高度为66px，比ie多占用了8px导致的，所以该值也是普遍适用的。

在ie9+以上,和其他的浏览器中，documentElement.cilentWidth，height，比起inner少了17px，因为滚动条占居17px

而在ie8中，该值比在ie9+的浏览器中还少了4px，目前不知道原因

在没有滚动的方向上，两者值是相同的，如果需要统一包含或者不包含滚动条，可以在这两种值中，加上或者减去17px，就能保持一致

body.clientWidth明显是不行的，无论在那个版本中，该属性值保存的是body元素的尺寸，当然如果视口与body一样大的话，也可以使用该值

总结:inner可以视为是包含滚动条尺寸的视口，documentElement.client可以视为不包含滚动条尺寸的视口，两者在存在滚动条的方向上相差17px

除此之外没有区别

要注意的是由于ie浏览器的头部高度比其他浏览器矮了8px，所以在视口的高度上比其他浏览器多了8px，所以IE看上去比较高。</>

body.client不能拿来判断视口尺寸。


混杂模式 PC端 屏幕尺寸1920*1080 全屏浏览器测试 格式 宽 / 高

浏览器/属性 inner documentElement.client body.client
i8 undefined / undefined 1899 / 961 3000 /3500
i9 1920 / 982 1903 /965 3000 /3500
i10+ 1920 / 982 1903 /965 1903 /965
chrome 1920 / 974 1903 / 3500 1903 / 957
firefox 1920 / 974 1903 / 3500 1903 / 957

混杂模式下，inner系列的表现和标准模式下一致，ie8仍然不支持，ie9+以上的浏览器仍然高了8px

混杂模式下的ie8,ie9与标准模式下的ie8,ie9的三个值完全一致，但是从ie10+开始，body.client就不一样了，ie10+的浏览器中的body.client,和其他两个属性相同，不再代表body元素的尺寸

所以，在混杂模式下，ie10+的浏览器，你可以任意使用，因为三者的值都是相同的

chrome和firefox中的body.client也不再代表body元素的尺寸，也可以使用

docuementElement.clientHeight也跟着抽风了，在混杂模式下该height代表body元素的height

总结:不要开启混杂模式

时间： 2024-11-01 11:47:10

JS获取视口的相关文章

js 获取浏览器宽度和高度

有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条 ). 对于Internet Explorer.Chrome.Firefox.Opera 以及 Safari: window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度 对于 Internet Explorer 8.7.6.5: document.documentElement.clientHeight document.documentElement.cli

JS获取图片的缩略图,并且动态的加载多张图片

找了好多资料也没有找到该死的ie的解决办法,最后放弃了ie <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js获取缩略图</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <st

用js获取页面颜色值怎么比较?

一般情况下,我们通过十六进制的方式设置页面颜色值 如#64e164 但当我们通过js获取这个dom颜色值的时候,返回的值却可能不是十六进制的,所以比较的时候需要分浏览器进行 在火狐和谷歌浏览器中,返回的是rgb格式表示的颜色值,如前面的#64e164  返回的是  rgb(100, 225, 100) 这时候就需要用rgb格式的字符串和获取的值作比较才会返回true 但是在ie中,则需要使用16进制的方式比较才能返回true

js获取单选按钮的值

<!DOCTYPE html> <html> <body> <script type="text/javascript"> function select_patten(value) { // varvalue=document.getElementsByName(text).value; //  alert('hello'); alert(value); } </script> //以下这种方式只能获得单个单选按钮的valu

js获取当前日期方法

我们经常会用到日期,下面是js获取日期的方法,后面有其他的方法还会不定期更新. 1 // 获取当前日期时间 2 function getCurrentDateTime(){ 3 var date=new Date(); 4 var year=date.getFullYear(); 5 var month=date.getMonth()+1; 6 var day=date.getDate(); 7 var hours=date.getHours(); 8 var minutes=date.getM

js获取时间

Js获取当前日期时间及其它操作 var myDate = new Date();myDate.getYear();        //获取当前年份(2位)myDate.getFullYear();    //获取完整的年份(4位,1970-????)myDate.getMonth();       //获取当前月份(0-11,0代表1月)myDate.getDate();        //获取当前日(1-31)myDate.getDay();         //获取当前星期X(0-6,0代表

js获取日期昨天,明天以及上月最后一天的日期

js回去今天,明天,昨天的日期 1 function getDateStr(AddDayCount) { 2 var dd = new Date(); 3 dd.setDate(dd.getDate() + AddDayCount); //获取AddDayCount天后的日期 4 var year = dd.getFullYear(); 5 var mon = dd.getMonth()+1; //获取当前月份的日期 6 var day = dd.getDate(); 7 return year

js获取url链接中的参数

js获取url链接中的参数:url传递参数这是常识,这里就不多介绍了,既然传递参数就要获取参数的值,下面就介绍一下如何实现此功能.代码如下: function request(paras){ var url="softwhy.com?a=1&b=2"; var paraString=url.substring(url.indexOf("?")+1,url.length).split("&"); var paraObj={} for

Js获取当前日期时间+日期印证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天

Js获取当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+JS判断某年某月有多少天 字符串转日期型+Js当前日期时间+日期验证+判断闰年+日期的天数差+日期格式化+日期所在年的第几周 日期时间脚本库方法列表Date.prototype.isLeapYear 判断闰年Date.prototype.Format 日期格式化Date.prototype.DateAdd 日期计算Date.prototype.DateDiff 比较日期差Date.prototype.toString 日期转字符