以跨浏览器的方式查找视口的确切高度和宽度(无Prototype / jQuery)

我试图find浏览器的视口的确切高度和宽度,但我怀疑Mozilla或IE给我错误的数字。 这是我的身高的方法:

var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; 

我还没有开始宽度,但我猜这将是类似的东西。

有没有更正确的方式获取这些信息? 理想情况下,我希望该解决scheme也可以与Safari / Chrome /其他浏览器一起使用。

5 Solutions collect form web for “以跨浏览器的方式查找视口的确切高度和宽度(无Prototype / jQuery)”

你可以试试这个:

 function getViewport() { var viewPortWidth; var viewPortHeight; // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight if (typeof window.innerWidth != 'undefined') { viewPortWidth = window.innerWidth, viewPortHeight = window.innerHeight } // IE6 in standards compliant mode (ie with a valid doctype as the first line in the document) else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewPortWidth = document.documentElement.clientWidth, viewPortHeight = document.documentElement.clientHeight } // older versions of IE else { viewPortWidth = document.getElementsByTagName('body')[0].clientWidth, viewPortHeight = document.getElementsByTagName('body')[0].clientHeight } return [viewPortWidth, viewPortHeight]; } 

http://andylangton.co.uk/articles/javascript/get-viewport-size-javascript/

但是,甚至不可能在所有浏览器中获得视口信息(例如,在怪异模式下的IE6)。 但是上面的脚本应该做的很好:-)

你可以使用较短的版本:

 <script type="text/javascript"> <!-- function viewport(){ var e = window; var a = 'inner'; if (!('innerWidth' in window)){ a = 'client'; e = document.documentElement || document.body; } return { width : e[ a+'Width' ] , height : e[ a+'Height' ] } } //--> </script> 

我总是使用document.documentElement.clientHeight / clientWidth 。 在这种情况下,我不认为你需要OR条件。

尝试这个..

 <script type="text/javascript"> function ViewPort() { var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) var viewsize = w + "," + h; alert("Your View Port Size is:" + viewsize); } </script> 

使用此tipp: http : //www.appelsiini.net/projects/viewport或该代码: http ://updatepanel.wordpress.com/2009/02/20/getting-the-page-and-viewport-dimensions-using -jquery /

  • 中间有文字的水平线CSS技术
  • 在IE10中,交叉源postMessage被破坏了吗?
  • 为跨浏览器CSS缩放完整样式
  • 如何在IE11中带回“浏览器模式”?
  • 在行内块元素中删除大文本上方和下方的空白区域
  • 浏览器的HTML元素的默认CSS
  • Math.round(num)与num.toFixed(0)和浏览器不一致
  • 文件input“接受”属性 - 是否有用?
  • 我怎样才能防止退格键导航回来?
  • 垂直和水平居中在CSS中的文字圈(如iPhone通知徽章)
  • D3.JS浏览器支持